Vue组件通信的方式

以下介绍三种比较常用的组件通信

---

一、父组件传到子组件

在父组件上的子组件标签上绑定一个自定义属性，挂载需要传递的值，在子组件使用props:[]来接受

数据是单向流动的 父——>子 （子组件中修改接收的数据，是无效的会有一个红色警告）
父组件：

子组件：

props可以用数组和对象的方式接收数据

二、子组件传到父组件

子传父就是在父组件绑定自定义事件在子组件调用父组件方法，并且将需要传递的值作为参数传递给父组件

三、兄弟组件之间的通信

可以使用Bus事件总线，创建一个中转站来进行传值
项目中创建一个bus文件夹，在其下面创建index.js文件

在main.js中引用

在要传递数据的A组件方法中通过 $ bus.$emit 将值放入setDataToBrather中

在要接收数据的B组件中通过 $ bus.$on 将值取出，第一个参数还是之前传递的方法名，第二个参数是一个函数，函数中得参数就是传递得值，最后别忘了在beforeDestroy钩子函数中将这个线程关闭

四、ref通信

ref 和 关系链 组件可以利用ref为自己的DOM做出独有的标记，
利用this.$refs来获得从而进行操作。

五、使用 $ root, $ parent, $ children

每一个组件的实例上，都有$ root,$ parent,$ children用来指向最外层的根实例、父组件实例、子组件实例。
所以，理论上来说，因为存在一条关系链，所以任意的组件都能找到除了它之外的任意的组件，
这样的话我们就可以进行任意的通信,更改数据、调用方法。但最好不要这么做，因为组件的作用域应该都是独立的。

比如，数据放在子组件身上，让父组件去改，这种思路本身就是不科学的，所以数据应该放在父组件身上，
父组件把数据传递给子组件，父组件更改数据的时候，子组件也就改了。