以下是在 Vue 3.0 中使用事件的示例：
<template>
<div>
<button @click="handleClick">Click me</button>
<custom-component @custom-event="handleCustomEvent"></custom-component>
</div>
</template>
<script>
import { defineComponent } from 'vue';
const CustomComponent = defineComponent({
template: '<button @click="triggerCustomEvent">Trigger Custom Event</button>',
methods: {
triggerCustomEvent() {
// 在组件内部触发自定义事件
this.$emit('custom-event', 'Custom event data');
}
},
emits: ['custom-event'] // 使用 emits 选项声明可以触发的事件
});
export default {
components: {
CustomComponent
},
methods: {
handleClick() {
console.log('Button clicked');
},
handleCustomEvent(data) {
console.log('Custom event handled with data:', data);
}
}
};
</script>
在上述示例中，我们使用 @click 直接绑定了一个原生事件处理函数，而在 CustomComponent 中，我们使用 $emit 方法触发了一个自定义事件。值得注意的是，在 CustomComponent 的 emits 选项中声明了可以触发的自定义事件，这有助于提供更好的类型检查。
需要注意的是，Vue 3.0 中 $on 和 $off 方法已经被废弃，取而代之的是直接在 setup 函数中使用 on 函数：
<script>
import { defineComponent, on } from 'vue';
export default defineComponent({
setup() {
// 在 setup 函数中使用 on 函数
onMounted(() => {
console.log('Component mounted');
});
return {};
}
});
</script>
这种方式更加一致并且在类型检查方面更加友好。有关 Vue 3.0 中的事件 API 的更多信息，请查阅[官方文档](https://v3.vuejs.org/guide/migration/events-api.html)。
转载请注明出处：http://www.zyzy.cn/article/detail/544/Vue 3.0