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

从vue1.x过来的都知道，在vue2.0中去掉了父子组件间事件通信的$dispatch和$broadcase。官方的考虑是，基于组件树结构的事件流方式确实很难理解，而且会随着组件结构的扩大而变得越来越脆弱。特别是当组件层次结构很深时。广播和事件分发的机制比较混乱。官方废除了它的同时，也为我们提供了一个替代方案，包括实例化一个空的vue实例，并使用$emit来反映子组件上的状态变化1.使用$emit作为父组件触发事件helloWorld.vue，而dialogConfigVisible变量控制显示或隐藏子组件弹出窗口。configBox.vue作为一个子组件，假设是一个封装好的公告弹窗。在父组件helloWorld.vue这样就可以在子组件中点击按钮触发listenerToC1事件，在监听这个事件父组件。其实和$emit触发事件类似，不同的是它可以嵌套多级，不一定是直接的父子组件就可以触发。4.sync修饰符在Vue1.x中，使用props进行“双向绑定”，实现父子组件通信。.sync修饰符用于将子组件中相应的prop值变化同步到父组件。但是，这打破了单向数据流，在2.0版本中被删除，并在2.3.0版本中以语法糖的形式添加。你可以看看文档中给出的例子被扩展为bar=val">其实和本文中的第一种方法基本相同，更简化了。同样，helloWorld.vue作为父组件，configBox.vue作为子组件，然后在子组件中，显式触发更新事件：方法：{dialogClose(){this.show=false;this.$emit("update:visible",false)}}这样可见的变化可以同步到父组件。