vue3 emits $event 的使用
时间: 2023-12-11 13:29:29 浏览: 34
在 Vue3 中,组件通过 `emits` 选项来声明它所支持的事件。当组件触发一个事件时,可以使用 `$emit` 方法来向父组件派发事件,并且可以传递任意数量的参数。在父组件中,可以使用 `v-on` 指令来监听子组件派发的事件,并且可以通过 `$event` 访问到子组件传递的参数。
例如,假设我们有一个子组件 `ChildComponent`,它声明了一个名为 `my-event` 的事件:
```javascript
// ChildComponent.vue
<template>
<button @click="$emit('my-event', 'hello', 'world')">Click me</button>
</template>
<script>
export default {
emits: ['my-event']
}
</script>
```
在父组件中,我们可以使用 `v-on` 指令来监听 `my-event` 事件,并且可以通过 `$event` 访问到子组件传递的参数:
```javascript
// ParentComponent.vue
<template>
<child-component @my-event="handleEvent"></child-component>
</template>
<script>
export default {
methods: {
handleEvent(...args) {
console.log(args) // ['hello', 'world']
}
}
}
</script>
```