vue3 $emit 怎么用

在Vue3中，使用$emit方法向父组件发送自定义事件。下面是一个使用$emit方法的示例：

假设我们有一个父组件Parent和一个子组件Child，我们想要在子组件中触发一个名为“myEvent”的自定义事件，并将一个字符串参数传递给父组件。在子组件中，我们可以使用以下代码触发自定义事件：

// 子组件Child
export default {
  methods: {
    handleClick() {
      const message = 'Hello, world!'
      this.$emit('myEvent', message)
    }
  }
}

在父组件中，我们可以使用v-on指令监听子组件的自定义事件，并在触发时执行一个方法。在这个方法中，我们可以访问子组件传递的参数。以下是一个示例：

<!-- 父组件Parent -->
<template>
  <div>
    <child-component @myEvent="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(message) {
      console.log(message) // 输出：'Hello, world!'
    }
  }
}
</script>

在这个示例中，我们在父组件中使用v-on指令监听子组件的自定义事件“myEvent”，并在触发时执行handleEvent方法。在handleEvent方法中，我们可以访问子组件传递的参数“message”。