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

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>

在子组件中，我们使用 emits 选项声明了一个名为 custom-event 的事件。然后在 onClick 方法中，我们使用 $emit 触发了这个事件并传递了一个数据对象。

在父组件中，我们使用 @custom-event 监听了子组件触发的 custom-event 事件。当这个事件被触发时，onCustomEvent 方法会被调用，并且会接收到一个包含事件数据的参数。