首页vue3 组合式api emit

vue3 组合式api emit

时间: 2024-09-29 18:10:23 浏览: 102

在 Vue 3 中，组合式API（Composition API）提供了一种更模块化的方式来组织组件内部逻辑。emit 是 Vue 自定义事件的核心功能，即使在没有使用传统的 <template> 和 v-on 指令的情况下，我们仍然可以通过 ref、onMounted、onUpdated 等生命周期钩子以及 useEffect 来处理事件。

当你想从一个函数组件或自定义 hook 中触发一个事件时，你可以使用 this.emit()。例如：

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 钩子中添加：

<ParentComponent @custom-event="handleCustomEvent"></ParentComponent>

<script setup>
function handleCustomEvent(data) {
  console.log('Handling custom event:', data);
}
</script>