Vue 3 通讯 API 深入探究：剖析 defineProps()、defineEmits() 和 defineExpose()

2023-12-17 23:02:51

引言

组件通讯是 Vue.js 应用程序构建的关键方面。Vue 3 引入了强大的通讯 API，其中包括 defineProps()、defineEmits() 和 defineExpose()。这些 API 提供了更灵活、更类型安全的方式来管理组件之间的属性和事件。

了解 defineProps()

defineProps() 允许组件接收父组件传递的属性。它接受一个包含属性类型和默认值的 JavaScript 对象作为参数。例如：

import { defineProps } from 'vue'

export default {
  setup() {
    const props = defineProps({
      message: {
        type: String,
        default: 'Hello, world!'
      },
      counter: {
        type: Number,
        required: true
      }
    })

    return { props }
  }
}

在这里，props.message 是可选的，默认为 "Hello, world!"，而 props.counter 是必需的，意味着父组件必须传递一个数值。

运用 defineEmits()

defineEmits() 定义组件发出的事件。它接受一个包含事件名称和参数类型的 JavaScript 对象作为参数。例如：

import { defineEmits } from 'vue'

export default {
  setup() {
    const emit = defineEmits(['update:counter'])

    return { emit }
  }
}

在这里，组件可以发出一个名为 "update:counter" 的事件，该事件有一个名为 "value" 的参数。

探索 defineExpose()

defineExpose() 允许组件公开其内部状态和方法，使其可以被父组件或其他子组件访问。它接受一个包含要公开的属性和方法的 JavaScript 对象作为参数。例如：

import { defineExpose } from 'vue'

export default {
  setup() {
    const exposed = defineExpose({
      counter: 0,
      incrementCounter() { this.counter++ }
    })

    return { exposed }
  }
}