VUE之组件（父子与非父子通信）

组件组织

通常一个应用会以一棵嵌套的组件树的形式来组织。

日常开发里，我们可以按照功能将一个网页拆分成很多个部分，每个部分就是一个组件。
例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的子组件。

父子组件通信

父子组件传值通信
假设第二层组件想和第一层组件进行通信，分析其传值过程
1、(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信
2、(第二层向第一层传值)：子组件通过触发自定义事件向父组件传值，如此便实现了父子组件向上通信

跨级组件通信

跨级组件传值通信
假设第三层组件想和第一层组件进行通信
1、(第一层组件向第三层组件传值)—禁止第一层直接传值到第三层，需要逐层传递，即1→2→3，此时便可以实现跨级组件向下通信
2、(第三层组件向第一层组件传值)—通过触发自定义事件将数据传递至第二层，然后第二层通过事件触发传递至第一层，如此逐层传递，便可以实现跨级组件向上通信

兄弟组件通信

兄弟组件传值通信
假设第三层组件想和同层的另一个组件进行通信。
如果还是逐层传递至第二层，再由第二层传递至第三层，此时代码量十分累赘复杂，这也不符合Vue的定义（Vue是一个轻量级的视图层框架）。

兄弟|非父子组件通信

引用官方文档:
因为基于组件树结构的事件流方式让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。
官方推荐的状态管理方案是 Vuex。不过如果项目不是很大，状态管理也没有很复杂的话，使用 Vuex 有种杀鸡用牛刀的感觉，当然，这也是要根据自己的需求来的。
本节介绍下另一种方法，即bus/总线/发布订阅模式/观察者模式来解决
文档术语：
通过使用事件中心，允许组件自由交流，这个集中式的事件中间件就是 Bus总线。

语法：
在组件中使用$emit， $on， $off 分别来分发、监听、取消监听事件

接下来依次做下介绍
首先定义两个兄弟组件，如下所示

<div id="demo">
			<my-btn :count="6"></my-btn>
			<my-btn :count="2"></my-btn>
		</div>
		<script type="text/javascript">
			Vue.component('my-btn',{
   
				props:{
   
					count:Number
				},
				template:`<button>按钮{
   {count}}</button>`
			})
			new Vue({
   
				el:'#demo'
			})
		</script>

要求：点击一个组件，另一个兄弟组件也发生改动，两者数值相等

兄弟|非父子组件通信

兄弟组件通信
接下来结合案例，介绍下如何通过bus/总线/发布订阅模式/观察者模式来解决非父子组件通信。

第一步(注册全局bus总线)：
创建一个Vue实例，将其赋值给Vue.prototype.bus

解析：在Vue的prototype类上挂载了一个bus属性，该属性指向Vue实例。只要在其后通过Vue实例创建组件，则每个组件都会有bus属性
第一步(注册全局bus)：
写法2：Vue bus的使用（兄弟｜非父子组件传值）–>可以使用一个空的Vue实例作为中央事件总线new Vue()，此外也可以写成$bus

有人可能会问“为什么加$，作用是什么”？

接下来简单介绍下$作用

$命名法则

简介：
$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突，即避免命名冲突。接下来结合案例测试下

<div id="demo"></div>
		<script type="text/javascript">
			Vue.prototype.action='吃'
			new Vue({
   
				el:'#demo',
				mounted(){
   
					document.write(this)
					document.write(this.action)
				}
			})
		</script>

![

接下来，在data数据里声明个同名的变量，如下所示

<div id="demo"></div>
		 <script type="text/javascript">
			Vue.prototype.action = '吃' ;
		 	    	new Vue({
   
		 	    		el:'#demo',
		 				data:{
   
		 					action:'睡'
		 				},
		 				mounted(){
   
		 					document.write(this)
		 					document.write(this.action)
		 				}
		 	    	})	
			
		</script>

修改代码如下所示
将Vue挂载实例命名前，加上前缀$，用于避免和已被定义的数据、方法、计算属性产生冲突，即避免命名冲突。

<div id="demo"></div>
			<script type="text/javascript">
				Vue.prototype.$action = '吃' ;
				new Vue({
   
					el:'#demo',
					data:{
   
						action:'睡'
					},
					created(){
   
						document.write(this)
						document.write(this.$action)
						document.write(this.action)
					}
				})
			</script>

兄弟|非父子组件通信

接下来继续介绍兄弟组件通信
再来梳理下需求，即当点击某个组件改变时，希望同时触发另外一个非父级组件改动，所以接下来需要在子组件绑定事件

<div id="app">
				<my-btn :count="6"></my-btn