Vue 3中的defineEmits()和defineProps()解析

defineProps() 和 defineEmits() 是 Vue 3 中 Composition API 的核心部分。

1. defineProps()

defineProps() 函数用于定义组件的 props，并将其作为响应式引用返回。这使得我们可以在 Vue 3 的 setup() 函数内直接使用 props。

// 在 setup() 函数中使用 defineProps()
setup() {
    const props = defineProps({
        title: String,
        likes: Number
    });
 
    // 使用 props.title 或 props.likes
}

2. defineEmits()

defineEmits() 函数用于定义组件可以触发的事件，并返回一个用于触发这些事件的函数。这使得我们可以在 Vue 3 的 setup() 函数内直接使用 emit()。

// 在 setup() 函数中使用 defineEmits()
setup(props, { emit }) {
    function increment() {
        emit('update:count', props.count + 1)
    }
 
    return { increment }
}

在上述代码中，我们定义了一个 increment() 函数，它会通过调用 emit() 来触发一个名为 'update:count' 的事件，并传递一个新的值。

注意：在 Vue 3 中，props 和 events 的定义不再依赖于组件选项。这使得我们可以更自然地在组件逻辑中使用它们，并使得组件的选项变得更加清晰。