什么？？？你连vue中父组件怎么监听子组件的事件都不知道？快来看看vue2和vue3中父组件监听子组件事件的区别吧-Toy模板网

这篇具有很好参考价值的文章主要介绍了什么？？？你连vue中父组件怎么监听子组件的事件都不知道？快来看看vue2和vue3中父组件监听子组件事件的区别吧。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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中，父组件不能使用 $o n 来监听子组件事件。$ 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>

在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>