vue2和vue3中父组件监听子组件事件的区别

一、vue2中父组件监听子组件事件

在Vue 2中，可以使用$emit方法在子组件上触发自定义事件，并使用v-on或@指令在父组件中监听该事件，也就是通过父组件给子组件绑定一个自定义事件实现子给父传递数据。例如：

<!-- 子组件中 -->
<button @click="$emit('child-event', childData)">点击我传递子数据</button>

<!-- 父组件中 -->
<!-- 第一种写法，使用@或v-on -->
<Child @child-event="getChildData"/>
<!-- 或 -->
<Child v-on:child-event="getChildData"/>

<script>
  import Child from './Child.vue';
  export default {
    components: {
      Child,
    },
    methods: {
      getChildData(childData) {
        // 处理 child 事件
      }
    }
  }
</script>
<!-- 第二种写法，使用ref -->
<Child ref="child"/>
<script>
  import Child from './Child.vue';
  export default {
    components: {
      Child,
    },
    methods: {
      getChildData(childData) {
        // 处理 child-event 事件
      }
    },
    mounted(){
      this.$refs.child.$on('child-event',this.getChildData)
    }
  }
</script>

在这个例子中，当子组件中的按钮被单击时，将触发child-event事件，并且事件数据childData将被传递给父组件中名为getChildData的方法，可以在方法中处理事件的后续操作。

二、vue3中父组件监听子组件事件

在Vue 3中，父组件不能使用$on来监听子组件事件。$on是Vue 2中用于在某个实例上监听自定义事件的方法，而在Vue 3中，这个方法已被移除。所以，在Vue 3中，您可以使用$emit方法在子组件上触发自定义事件，并使用@或v-on指令在父组件中监听该事件，也就是通过父组件给子组件绑定一个自定义事件实现子给父传递数据。例如：

<!-- 子组件中 -->
<button @click="$emit('child-event', childData)">点击我传递子数据</button>

<!-- 父组件中 -->
<!-- 使用@或v-on -->
<Child @child-event="getChildData"/>
<!-- 或 -->
<Child v-on:child-event="getChildData"/>

<script>
  import Child from './Child.vue';
  export default {
    components: {
      Child,
    },
    methods: {
      getChildData(childData) {
        // 处理 child-event 事件
      }
    }
  }
</script>

在这个例子中，当子组件中的按钮被单击时，将触发child-event事件，并且事件数据childData将被传递给父组件中名为getChildData的方法，可以在方法中处理事件的后续操作。

在Vue 3中，可以使用与Vue 2类似的方式来触发和监听自定义事件。但是，在Vue 3中还引入了一个新特性，即将事件处理函数添加到emits选项中。这样做可以在开发阶段提供类型检查和错误提示。
例如：

<!-- 子组件中 -->
<button @click="$emit('child-event', childData)">点击我传递子数据</button>

<!-- 父组件中 -->
<!-- 使用@或v-on -->
<Child @child-event="getChildData"/>
<!-- 或 -->
<Child v-on:child-event="getChildData"/>

<script>
  import Child from './Child.vue';
  export default {
    components: {
      Child,
    },
    methods: {
      getChildData(childData) {
        // 处理 child-event 事件
      }
    },
    emits: {
      // 将 "child-event" 添加到 emits 选项中
      'child-event': (childData) => {
        return true; // 表示此事件被允许
      }
    }
  }
</script>

在这个例子中，我们的父组件定义了一个名为getChildData的方法来处理子组件中触发的child-event事件。还使用emits选项将该事件添加到组件的选项列表中。

在emits选项中，我们还可以设置事件处理函数的签名，并以对象形式返回一个布尔值。返回true表示事件被允许，否则会在开发阶段引发警告。

总体来说，Vue 3中的新特性使其更易于管理和维护大型代码库，同时还提供了类型检查和错误提示，可以帮助我们更早地捕获和纠正代码错误。