vue的this.$emit()怎么用

Vue中的this.$emit()用于在子组件中触发自定义事件，并向父组件传递数据。下面是一个示例：

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

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello from child component');
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data;
    }
  }
}
</script>

在上面的示例中，子组件中的按钮被点击时，会触发custom-event事件，并将数据'Hello from child component'传递给父组件。父组件通过监听custom-event事件，并在事件处理函数中接收传递的数据，然后更新message的值。最终，父组件中的p标签会显示'Hello from child component'。