vue3 组合式api emit
时间: 2024-09-29 08:10:23 浏览: 24
在 Vue 3 中,组合式API(Composition API)提供了一种更模块化的方式来组织组件内部逻辑。`emit` 是 Vue 自定义事件的核心功能,即使在没有使用传统的 `<template>` 和 `v-on` 指令的情况下,我们仍然可以通过 `ref`、`onMounted`、`onUpdated` 等生命周期钩子以及 `useEffect` 来处理事件。
当你想从一个函数组件或自定义 hook 中触发一个事件时,你可以使用 `this.emit()`。例如:
```typescript
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup(props) {
const myValue = ref(null);
// 在某个操作后,你想触发一个名为 "custom-event" 的事件
function doSomething() {
myValue.value = ...; // 假设这是更新操作
// 触发事件并传递数据
this.emit('custom-event', myValue.value);
}
return {
onCustomEvent: (data) => {
console.log('Received data:', data); // 当其他地方监听到这个事件时执行的回调
},
doSomething,
};
},
});
```
在上面的示例中,`doSomething` 函数会在 `myValue` 更新后调用 `emit` 方法发送一个名为 `custom-event` 的事件,同时传递 `myValue` 的当前值。外部组件可以监听这个事件并处理传来的数据。
要监听这个事件,可以在模板或另一个组件的 `setup` 钩子中添加:
```html
<ParentComponent @custom-event="handleCustomEvent"></ParentComponent>
<script setup>
function handleCustomEvent(data) {
console.log('Handling custom event:', data);
}
</script>
```