vue3 emits 传递参数
时间: 2023-12-16 07:24:45 浏览: 31
在 Vue3 中,可以通过 emits 属性来定义组件所支持的事件,并且可以在触发事件时传递参数。具体实现方式如下:
1. 在组件中定义 emits 属性,指定组件所支持的事件名称:
```javascript
// MyComponent.vue
<template>
<button @click="handleClick">点击触发事件</button>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
emits: ['my-event'],
methods: {
handleClick() {
// 触发 my-event 事件,并传递参数
this.$emit('my-event', 'hello world');
}
}
});
</script>
```
2. 在父组件中使用该组件,并监听 my-event 事件:
```javascript
// ParentComponent.vue
<template>
<MyComponent @my-event="handleEvent"></MyComponent>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
handleEvent(msg) {
console.log(msg); // 输出:hello world
}
}
});
</script>
```