Vue 3: 定义Props与Emits，类型化你的代码

2023-02-06 11:57:37

在 Vue 3 中提升组件通信：活用 defineProps 和 defineEmits

在 Vue 3 中，Props 和 Emits 是两个必不可少的概念，分别用于在父子组件之间传递数据和触发事件。为了让代码更严谨、可维护，我们可以使用 defineProps 和 defineEmits 来定义它们，并明确其类型和默认值。

为什么使用 defineProps 和 defineEmits？

可读性与可维护性： 清晰地分隔 Props 和 Emits 的定义，提升代码可读性和可维护性。
类型检查： 提前捕获类型错误，确保代码的稳健性。
智能代码提示： IDE 可以提供准确的代码提示，提高开发效率。
类型定义文件： 自动生成 Typescript 类型定义文件，方便类型推断。

JS 中的用法

import { defineProps, defineEmits } from 'vue'

export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  emits: {
    close: () => {},
  },
}

TS 中的用法

import { defineProps, defineEmits } from 'vue'

export default {
  props: defineProps<{
    message: string,
  }>(),
  emits: defineEmits<{
    close: () => void,
  }>(),
}

代码示例

父组件（App.vue）：

<MyComponent message="Hello, world!" @close="handleClose" />

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent,
  },
  methods: {
    handleClose() {
      // 处理关闭逻辑
    },
  },
}
</script>

子组件（MyComponent.vue）：

export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  emits: {
    close: () => {},
  },
  methods: {
    close() {
      this.$emit('close') // 触发关闭事件
    },
  },
}