详细分析Vue3中的emit用法（子传父）

在Vue3中，emit是一个非常重要的概念，它被用于子组件向父组件传递事件和数据。emit的使用方法非常简单，子组件通过$emit方法来触发一个事件，并且可以传递一些数据给父组件。

以下是一个简单的例子，展示了如何在Vue3中使用emit：

<!-- 子组件 ChildComponent.vue -->
<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      // 触发名为 'send' 的事件，并传递数据 'Hello from Child' 给父组件
      this.$emit('send', 'Hello from Child');
    }
  }
}
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @send="receiveFromChild" />
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    receiveFromChild(data) {
      // 接收子组件传递的数据并保存在本地数据 message 中
      this.message = data;
    }
  }
}
</script>

在这个例子中，子组件有一个按钮，当按钮被点击时，会触发一个名为send的事件，并通过$emit方法传递数据给父组件。父组件通过在子组件标签上监听send事件（使用@send），并定义了一个方法receiveFromChild来接收数据。当事件被触发时，receiveFromChild方法会被调用，并接收到从子组件传递过来的数据，然后可以根据需要对数据进行处理。