vue2.0父子组件以及非父子组件通信
2019-07-10 本文已影响12人
中意8
一、父子组件通信
1、父组件传递数据给子组件，使用props属性来实现
传递普通字符串
父组件：
子组件：
结果： hello！
动态：父组件数据如何传递给子组件
父组件：
子组件：通过props属性接收数据
props属性验证有以下形式：
2、子组件与父组件通信
vue是单向数据传递的，如果子组件直接改变父组件传过来的数据是不允许的。但是可以通过触发事件通知父组件改变数据，实现改变子组件的目的。
子组件：
父组件：
二、非父子组件通信
有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线。原理就是把 Vue 实例当作一个中转站。
方法2:
在初始化web app的时候，main.js给data添加一个 名字为eventhub 的空vue对象。就可以使用 this.$root.eventHub 获取对象。
在组件内调用事件触发
在另一个组件调用事件接受，移除事件监听器使用$off方法。
二、非父子组件通信demo1
