VUE3.2里面怎么写
时间: 2023-09-26 11:09:24 浏览: 92
在 Vue 3.2 中,子组件可以通过 `emits` 选项来声明它所能够触发的事件。具体步骤如下:
1. 在子组件中,使用 `emits` 选项声明子组件所能够触发的事件。
```
// 子组件中
<template>
<button @click="emitMethod">触发事件</button>
</template>
<script>
export default {
emits: {
methodName: (arg1: string, arg2: number) => true
},
methods: {
emitMethod() {
this.$emit('methodName', arg1, arg2)
}
}
}
</script>
```
在 `emits` 选项中,可以声明一个对象,该对象的键为事件名称,值为一个函数,该函数返回一个布尔值,用于验证传递给该事件的参数。如果返回 `true`,则表示参数验证通过,否则表示参数验证失败。
2. 在父组件中,通过给子组件添加一个 `ref` 属性来获取子组件实例,并使用 `v-on` 指令或 `@` 符号监听子组件触发的自定义事件,在事件回调函数中调用子组件中的方法。
```
// 父组件中
<template>
<child-component ref="child" @methodName="handleMethod"></child-component>
</template>
<script>
export default {
methods: {
handleMethod(arg1, arg2) {
// 在事件回调函数中调用子组件中的方法
this.$refs.child.childMethod()
}
}
}
</script>
```
在父组件中,可以使用 `v-on` 指令或 `@` 符号来监听子组件触发的自定义事件,并在事件回调函数中调用子组件中的方法。在回调函数中,可以通过参数来获取子组件传递的数据。
需要注意的是,在 Vue 3.2 中,`$on` 和 `$off` 方法已经被废弃,可以使用 `v-on` 指令或 `@` 符号来监听事件。
阅读全文