vue3 emit用法

// 子组件 (ChildComponent.vue)
<template>
  <button @click="handleClick">点击我</button>
</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    handleClick() {
      // 使用 $emit 触发自定义事件，并传递参数给父组件
      this.$emit('custom-event', '来自子组件的消息');
    }
  }
}
</script>

// 父组件 (ParentComponent.vue)
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(message) {
      console.log(message); // 输出: 来自子组件的消息
    }
  }
}
</script>

解释说明：

1. 子组件：在子组件中，通过 this.$emit('custom-event', '来自子组件的消息') 触发一个名为 custom-event 的自定义事件，并传递一个字符串参数。
2. 父组件：在父组件中，通过 @custom-event="handleCustomEvent" 监听子组件触发的 custom-event 事件，并在 handleCustomEvent 方法中处理接收到的参数。