vue3 父子组件传值emit

在Vue 3中，父子组件之间的通信可以通过`emit`来实现。`emit`是一个自定义事件，用于在子组件中触发并向父组件传递数据。

首先，在父组件中，你需要使用`v-on`指令来监听子组件触发的事件，并在触发时执行相应的方法。例如：

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

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      // 在这里处理子组件传递过来的数据
      console.log(data);
    }
  }
}
</script>

然后，在子组件中，你可以使用`$emit`方法来触发自定义事件，并传递数据给父组件。例如：

<template>
  <button @click="emitEvent">点击触发事件</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      // 在这里触发自定义事件，并传递数据给父组件
      this.$emit('custom-event', 'Hello from child component');
    }
  }
}
</script>

当你点击子组件中的按钮时，会触发`custom-event`事件，并将数据`'Hello from child component'`传递给父组件的`handleEvent`方法进行处理。