Vue 3 中使用 emit 允许子组件向父组件传递信息

在 Vue 3 中，emit 是一个用于子组件向父组件传递信息的机制。当子组件内发生了一些事件，比如用户点击按钮，子组件可以通过自定义事件将信息传递给父组件。父组件可以监听这些自定义事件并作出相应的处理。

子组件中使用 emit

在 Vue 3 中，可以通过 defineComponent 和 setup 函数的上下文参数来使用 emit 方法。

使用 defineComponent 方式

export default defineComponent({
  props: ['title'],
  methods: {
    doSomething() {
      this.$emit('my-event', 'some value');
    }
  }
});

在这个例子中，当 doSomething 方法被调用时，子组件将触发一个名为 my-event 的自定义事件，并将 'some value' 作为事件的参数传递给父组件。

使用 setup 函数和 Composition API 方式

import { defineComponent, SetupContext } from 'vue';
export default defineComponent({
  props: ['title'],
  setup(props, context: SetupContext) {
    function doSomething() {
      context.emit('my-event', 'some value');
    }
    return {
      doSomething
    };
  }
});

在 setup 函数中，emit 方法通过上下文参数 context 来访问。

父组件监听自定义事件

在父组件的模板中，可以通过子组件的标签上使用 v-on 或简写为 @，来监听子组件触发的事件。

<ChildComponent @my-event="handleMyEvent" />

这里的 handleMyEvent 是父组件中的一个方法，它将在子组件触发 my-event 事件时被调用。

父组件中的事件处理方法

export default {
  methods: {
    handleMyEvent(value) {
      console.log('Event received with value:', value);
    }
  }
};

在这个例子中，当子组件触发 my-event 事件时，handleMyEvent 方法将被调用，并接收从子组件传递来的 'some value'。

注意事项

• 自定义事件名称建议使用 kebab-case（短横线分隔命名）。
• 和 props 一样，事件也是单向的：从子组件到父组件。
• 使用 emit 可以让组件之间的通信更加灵活，同时也遵循了 Vue 的单向数据流原则。
  通过使用 emit，你可以实现组件之间的通信，使得组件更加模块化，易于维护和扩展。