揭秘VUE3.2子父组件交互，vue、ts分离深入解析

2023-01-19 09:53:23

VUE3.2 子父组件交互指南

子父组件交互简介

随着前端技术的发展，组件化开发理念受到越来越广泛的认可。VUE3.2 作为一款优秀的组件化框架，为开发者提供了简洁易用的子父组件交互方式，从而促进应用程序的模块化和可重用性。

Props：数据传递的桥梁

在 VUE3.2 中，子组件从父组件接收数据的途径称为 Props 。父组件通过 props 向子组件传递数据，而后者通过 props 接收这些数据。props 的使用十分简单：

// 父组件
<template>
  <ChildComponent :message="myMessage" />
</template>

// 子组件
<script>
export default {
  props: ['message'],
  template: `<p>{{ message }}</p>`
}
</script>

Events：事件通信的渠道

Events 是子组件向父组件发送事件的机制。子组件通过 $emit 方法向父组件发送事件，父组件通过 v-on 指令监听这些事件。events 的使用也十分便捷：

// 子组件
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  },
  template: `<button @click="handleClick">点击我</button>`
}
</script>

// 父组件
<template>
  <ChildComponent @click="handleChildClick" />
</template>

Vue 和 TypeScript 分离最佳实践

在实际开发中，将 Vue 和 TypeScript 分离通常有助于代码维护和管理。VUE3.2 提供了对 TypeScript 的原生支持，通过安装 @vue/cli-plugin-typescript 插件即可实现分离：

vue add @vue/cli-plugin-typescript

创建 TypeScript 文件

在项目中创建 .ts 文件，并编写 TypeScript 代码。例如，创建一个名为 MyComponent.ts 的文件，代码如下：

import Vue from 'vue'

export default Vue.extend({
  template: '<div>Hello, world!</div>'
})

在 Vue 文件中使用 TypeScript 组件

在 Vue 文件中，使用 <script lang="ts"> 标签引入 TypeScript 组件。例如，创建一个名为 MyComponent.vue 的 Vue 文件，代码如下：

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script lang="ts">
import MyComponent from './MyComponent.ts'

export default {
  components: {
    MyComponent
  }
}
</script>