vue2.0父子组件以及非父子组件通信

一、父子组件通信

1、父组件传递数据给子组件，使用props属性来实现

传递普通字符串

父组件：

子组件：

结果：  hello！

动态：父组件数据如何传递给子组件

父组件：

子组件：通过props属性接收数据

props属性验证有以下形式：

2、子组件与父组件通信

vue是单向数据传递的，如果子组件直接改变父组件传过来的数据是不允许的。但是可以通过触发事件通知父组件改变数据，实现改变子组件的目的。

子组件：

父组件：

二、非父子组件通信

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线。原理就是把 Vue 实例当作一个中转站。

方法2:

在初始化web app的时候，main.js给data添加一个 名字为eventhub 的空vue对象。就可以使用 this.$root.eventHub 获取对象。

在组件内调用事件触发

在另一个组件调用事件接受，移除事件监听器使用$off方法。

二、非父子组件通信demo1