【Vue7】非父子组件之间的传值

重点啊！！当初学这个时候，纠结了好一会儿。
先来看看组件关系。

组件关系

可以把一个网页拆分成很多部分，如图所示，可以理解为一个组件，分成三个部分，顶部、左侧、右侧三个区域。也就是将1号组件再拆分成3个2号子组件，左侧区域进一步细化，可拆分成2个3号子组件，右侧进一步细化，可拆成3个3号子组件。

第二层的组件想和第一层的组件通信，也就是2号想和1号通信，
父组件通过props，和子组件传值；子组件通过事件派发和父组件传值。
那要是第三层组件想和第一层组件通信呢？可以直接通过属性传递吗？这是不行的。那能第一层先和第二层，第二层再和第三层通信，这样也算是第一层和第三层传递。
不过这种传值略显复杂，
如果三号中的第一个想和三号中的最后一个传值呢？

像这样
一步步传上去，再一步步传下来？(；´д｀)ゞ

有点晕啊，在Vue之中，像这样非父子组件间的传递（1和3这种爷爷孙子之类的，还有3和3这种兄弟之间的，反正就不是父子之间的），我们可以通过Vuex来解决。还有一种是通过发布订阅模式（观察者模式）来解决，在Vue中叫做总线机制。
先new一个Vue的实例，挂载在Vue.prototype.bus上，也就是Vue的prototype上挂载一个bus属性，这个属性指向Vue的实例，只要我们之后调用new Vue或者创建组件的时候，每一个组件都会有bus这个属性，因为每个组件或者每一个Vue的实例都是通过Vue这个类来创建的， 而之前在Vue的类上挂载了一个bus属性，而且是挂在了prototype上， 所以每个通过这个类创建的对象，也就是实例上都有bus属性，它都指向同一个Vue实例。
在这里我们希望当子组件被点击的时候，另一个子组件也相应的更改。怎么将子组件1的内容传递给子组件2呢？
this.bus.$emit('change', this.content)
分解来看，this.bus指的是什么？指的就是实例上挂载的bus，这个bus又是Vue实例，所以它上面就有$emit这个方法，所以就能通过这个方法来派发change事件。
有了派发事件，相应的其他组件就要进行监听。
在这里借助生命周期钩子（不记得的看生命周期那章）
这里借助的是mounted，也就是这个组件被挂载的时候，它会执行的一个钩子函数，在这里让组件去监听bus的改变，这个组件一定会有bus属性，在它上面也一定有$on这个方法，它就能监听到bus上派发的事件，也就是 $emit派发的change事件，这里监听到change事件之后，alert一下，每次点击，都会有2次弹窗。
为什么会有两次弹窗？
因为一个child组件内去触发事件时，两个child组件都进行同一个事件的监听，所以两个组件都会去弹窗，所以有两次弹窗。

利用bus
还没有结束，在mounted的function内，this的作用域发生了改变，所以要将this作用域进行保存，也就是var _this = this;，下面使用的是保存的_this，
但是会报出一个警告。
我是警告

因为child里的content是由父组件传递过来的。子组件是不能强行修改这个内容的。
同样自己定义一个副本，然后修改副本数据就行了。

我用的是自己的selfContent

非父子组件传值就解决啦。不论是兄弟组件还是什么其他非父子组件的通信，比较简单的都可以用这种来解决，复杂的用的是vuex