vue3 使用自定义事件

在Vue3中，使用自定义事件需要遵循以下步骤：
1. 在组件中使用emits选项声明自定义事件的名称。
2. 在调用this.$emit()方法触发自定义事件时，可以通过第二个参数为自定义事件传参。
3. 在组件中使用v-on的形式监听自定义事件。

举个例子，假设我们有一个父组件A和一个子组件B，我们想要在B组件中触发一个自定义事件，然后在A组件中监听这个事件并执行相应的操作。具体步骤如下：
1. 在B组件中使用emits选项声明自定义事件的名称，例如change。
2. 在B组件中使用this.$emit('change')方法触发自定义事件。
3. 在A组件中使用v-on的形式监听自定义事件，例如@a-change="handleEvent"。
4. 在A组件的methods选项中定义handleEvent方法，用于处理自定义事件触发后的操作。

举个例子，代码如下：

// 子组件B
<template>
 <button @click="handleClick">点击触发自定义事件</button>
</template>

<script>
export default {
  emits: ['change'],
  methods: {
    handleClick() {
      this.$emit('change', 'hello world')
    }
  }
}
</script>

// 父组件A
<template>
  <div>
    <p>监听到自定义事件触发了，传递的参数为：{{ message }}</p>
    <child-component @change="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(message) {
      console.log('监听到自定义事件触发了，传递的参数为：', message)
    }
  }
}
</script>