微客导航 » 文章资讯 » 浅谈Vue2.0父子组件间事件派发机制

浅谈Vue2.0父子组件间事件派发机制

2023-09-18 05:44:05 202

从vue1.x过来的都知道，在vue2.0中，父子组件间事件通信的$dispatch和$broadcase被移除了。官方考虑是基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆落。特别是在组件层级比较深的情况下。通过广播和事件分发的机制，就显得比较混乱了。

官方在废除的同时，也为我们提供了替换方案，包括实例化一个空的vue实例，使用$emit反应子组件上的状态变化

1.使用$emit触发事件

helloWorld.vue作为父组件，dialogConfigVisible变量控制子组件弹框显示或隐藏。

configBox.vue作为子组件，假设为封装的公告弹窗。

在父组件中helloWorld.vue中

importEmitterfrom"../mixins/emitter"; exportdefault{ name:"f1", mixins:[Emitter], componentName:'f1', mounted(){ this.$on("listenerToC1",(value)=>{ alert(value); }) } }

这样，就可以在子组件中点击按钮，触发listenerToC1事件，在父组件中监听到这个事件，

其实更$emit触发事件类似。不同之处在于，这里可以多级嵌套，不一定是直接的父子组件都可以触发到。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

浅谈Vue2.0父子组件间事件派发机制

热门推荐

随机推荐