VUE - 组件之间的数据交互

父组件与子组件之间的数据交互

   父组件通过props传递值给子组件：子组件在父组件中上树时设置一个动态的自定义属性并写入属性值，子组件就可以通过props接收到这个属性值。

  子组件通过$emit( )传递值给父组件：子组件中把要传递的值写入$emit( )中，子组建在父组件中上树时用@info="infoHandler"接收。

  $emit( )里传递的数据不一定要命名为info，这个数据的命名可以随意，父组件@时根据命名即可。

同级子组件与子组件之间的数据交互

  在React当中实现子组件之间的数据交互的方法是通过父组件作为数据的中转站。

  **兄弟子组件之间通过$bus来实现数据的交互**：$bus( )不是Vue内置的，是编程工作者在工作当中后来创造的。

  数据跨级传递则需要用到VueX

  在入口文件中的Vue原型Vue.prototype上定义的数据能被组件读取

  什么是$bus( )?它为什么可以服务于同级组件之间的通信？

  上面组件从入口文件的Vue原型上所获取的数据在组件上是可以被获取但是无法被操作的：

  将daytoyAdd( )函数改作如下的样子：

  无论怎么点按钮数据都不会产生任何变化。

  我们再尝试一下把main中的daytoy写成引用类型数据：

  此时点击按钮后数据仍然不会有任何变化。

  我们再尝试一下讲这个数据写在Vue的实例new Vue( )中：

  这样的情况下数据终于得以被操作更新：

  综上，上面写在入口文件中的数据daytoy就是bus，习惯被写作$bus:

  任何写在Vue.prototype上的东西都能被组件访问，但是组件并不能操作这个数据使视图更新。

  所谓bus就是写在Vue原型Vue.prototype上的Vue实例，这种写法把数据放到了全局上使其得以被操作。

 

 

 

$bus的应用-兄弟组件间的数据交互

  以上写法虽然达到了子组件之间传递信息的效果但使用watch进行数据检测并不算是真正意义上的信息沟通，以下有一个优化一点的写法：

  在这里bus就相当于一个中转信息的工具，信息通过bus真正传达到了真正要传达到的地方而不是传到入口文件或是父组件再让接受信息的一方以watch监听的形式来获得不是信息本身的信息。

  推导过程：

  $emit是Vue内置的可以让子组件传递信息给父组件的方法，子组件之间传递信息如果要用这个方法需要一个中转，下面尝试借助main作为信息的中转站，因为BusNo1.vue和BusNo2.vue不是父子组件关系因此不能直接用$emit( )。

  将$emit( )作为在main的methods中的函数然后在信息发送源BusNo2.vue中调用传参，再在main中借助生命周期created( )触发：

  能达到的结果与上面一样，但此时信息并没有传递到BusNo1.vue组件里，要使信息传入到BusNo1.vue并被其接收才算完成整个信息沟通的过程，然而我们并不能直接再在BusNo1.vue写一个created( )- $on( )来触发$emit( )，因为BusNo1.vue与BusNo2.vue不是父子组件关系：

  利用一个全局的在Vue原型上的它的实例bus作为一个信息运输工具就可以将信息实实在在的运输到信息接收方。