vue2和vue3中，关于$emit的用法

在Vue2中，$emit用于触发组件实例上的事件，向父组件传递数据。而在Vue3中，虽然仍可使用$emit，但官方推荐使用emits选项来声明可触发的事件。子组件通过emits声明事件，父组件通过v-on监听并响应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 2 和 Vue 3 中关于 $emit 的用法略有不同。

Vue 2

在 Vue 2 中，$emit 是组件实例方法，用于触发当前实例上的事件。它接收两个参数：事件名称和可选的数据：

this.$emit('eventName', eventData);

当 $emit 被调用时，它会向父级组件触发一个自定义事件，并传递一个可选的数据对象。子组件可以使用 v-on 指令监听这些自定义事件。

示例：

<!-- Child.vue -->
<template>
  <button @click="onClick">Click me!</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      // 触发 custom-event 事件，并传递一个数据对象
      this.$emit('custom-event', { message: 'Hello, world!' });
    }
  }
}
</script>

<!-- Parent.vue -->
<template>
  <child-component @custom-event="onCustomEvent"></child-component>
</template>

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

export default {
  components: { Child },
  methods: {
    onCustomEvent(data) {
      console.log(data.message); // Hello, world!
    }
  }
}
</script>

Vue 3

在 Vue 3 中，$emit 已经被废弃了，官方推荐使用 emits 选项来声明组件可触发的事件。

emits 选项是一个数组，包含一个或多个事件名称。每个事件名称可以是一个字符串或者一个对象，对象包含了事件名称、参数和可选的修饰符。

示例：

<!-- Child.vue -->
<template>
  <button @click="onClick">Click me!</button>
</template>

<script>
export default {
  emits: ['custom-event'],
  methods: {
    onClick() {
      // 触发 custom-event 事件，并传递一个数据对象
      this.$emit('custom-event', { message: 'Hello, world!' });
    }
  }
}
</script>

<!-- Parent.vue -->
<template>
  <child-component @custom-event="onCustomEvent"></child-component>
</template>

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

export default {
  components: { Child },
  methods: {
    onCustomEvent(data) {
      console.log(data.message); // Hello, world!
    }
  }
}
</script>