vue3中是如何使用emit
时间: 2024-03-09 08:25:08 浏览: 24
在 Vue 3 中,使用 `emit` 与 Vue 2 中基本一致,只需要在组件中使用 `$emit` 方法触发事件即可。
下面是一个简单的示例:
```
<template>
<button @click="onClick">点击我触发事件</button>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
onClick() {
this.$emit('my-event', 'hello world');
}
}
});
</script>
```
在上面的示例中,我们在 `onClick` 方法里使用 `$emit` 方法来触发名为 `my-event` 的自定义事件,并传递了一个字符串参数 `'hello world'`。
在使用该组件的父组件中,我们可以通过 `v-on` 或 `@` 指令来监听该事件:
```
<template>
<my-component @my-event="handleEvent"></my-component>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
handleEvent(msg) {
console.log(msg); // 'hello world'
}
}
});
</script>
```
在上面的示例中,我们使用 `@my-event` 监听 `my-event` 事件,并在 `handleEvent` 方法中接收传递的参数。当 `my-component` 组件触发 `my-event` 事件时,`handleEvent` 方法会被调用,并输出 `'hello world'`。