Vue3中使用emit

在Vue 3中，`emit` 是用于在组件间触发和响应自定义事件的核心方法。它主要用于父组件向子组件传递消息，以便子组件可以根据接收到的信息做出相应的处理。以下是 `emit` 的基本用法：

// 父组件模板
<template>
  <button @click="showChildMessage">Show Child Message</button>
  <child-component :message="parentMessage" @myEvent="handleMyEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    showChildMessage() {
      this.parentMessage = 'Hello from Parent!';
      this.$emit('myEvent'); // 触发自定义事件
    },
    handleMyEvent(messageFromChild) {
      console.log('Received message:', messageFromChild);
    }
  }
};
</script>

在上面的例子中，`showChildMessage` 方法触发了名为 `myEvent` 的事件，并将 `"Hello from Parent!"` 作为参数发送出去。`ChildComponent` 接收这个事件并可以处理它：

// 子组件 template
<template>
  <p v-if="message">{{ message }}</p>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('myEvent', 'Hello from Child!'); // 子组件响应事件并发送消息
    }
  }
};
</script>

当你点击父组件的按钮时，子组件的 `sendMessage` 方法会被触发，然后父组件的 `handleMyEvent` 方法会被调用，打印出子组件的消息。