Vue3中props和emit怎么使用
更新时间：2023-07-31
前言：
在 Vue3 中，props 用于接收父组件传递的数据，而 emit 用于触发子组件向父组件传递数据的事件。本文将介绍在 Vue3 中如何使用 props 和 emit。
使用 props：
在 Vue3 中，可以通过组件选项 props 来注册接收的属性。props 的值可以是一个数组或对象。数组中可以指定要接收的属性名称，对象中可以指定属性名称和类型。下面是一个示例：
注册接收的属性
// 子组件代码 props: ['message']
在上述示例中，子组件通过 props: ['message'] 注册了一个接收的属性 message，然后在组件中就可以通过 this.message 来访问该属性了。
除了数组外，还可以使用对象来注册属性，并指定属性的类型。这样可以在使用属性时进行类型检查。以下是一个示例：
使用对象注册属性
// 子组件代码
props: {
count: Number,
title: {
type: String,
required: true
}
}
在上述示例中，子组件通过对象的方式注册了两个属性：count 和 title。其中 count 属性的类型为 Number，title 属性的类型为 String，且必须传递的属性（required: true）。
使用 emit： 在 Vue3 中，可以使用 emit 方法来触发子组件向父组件传递数据的事件。emit 方法接受两个参数，第一个参数是要触发的事件名称，第二个参数是要传递的数据。以下是一个示例：触发事件传递数据
// 子组件代码
methods: {
handleClick() {
this.$emit('update:title', '新的标题');
}
}
在上述示例中，子组件通过 this.$emit('update:title', '新的标题') 语句触发了一个名为 update:title 的事件，并传递了一个新的标题。父组件可以监听这个事件，并在事件处理函数中接收传递的数据。
父组件监听子组件事件
// 父组件代码
<ChildComponent @update:title="handleUpdateTitle" />
// 父组件事件处理函数
methods: {
handleUpdateTitle(newTitle) {
console.log(newTitle);
}
}
在上述示例中，父组件通过 @update:title="handleUpdateTitle" 在组件上监听了 update:title 事件，并将事件处理函数指定为 handleUpdateTitle。当子组件触发 update:title 事件时，父组件的 handleUpdateTitle 方法将会被调用，并接收到传递的新标题。
