vue3中子父组件传值使用$emit

在Vue 3中，`$emit` 是用于子组件向父组件传递数据的重要工具，它实现了事件驱动的双向通信机制。当你需要触发一个自定义事件并传递数据时，通常会在子组件的某个操作完成后调用 `this.$emit`。基本语法如下：

// 子组件中
methods: {
  sendDataToParent() {
    this.$emit('custom-event', { data: '这是一个来自子组件的数据' });
  }
}

在这个例子中，`custom-event` 是你在父组件中需要监听的事件名，`{ data: '...' }` 是你要传递给父组件的对象。

然后，在父组件的模板上，你可以通过 `v-on` 或者 `@` 指令来监听这个事件：

<template>
  <div>
    <child-component @custom-event="handleDataFromChild"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleDataFromChild(data) {
      console.log('从子组件接收到的数据:', data);
    }
  }
};
</script>

当子组件调用 `sendDataToParent()`，父组件的 `handleDataFromChild` 函数会被调用，并且传递的数据会作为参数。