持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

前言

今天继续加油学习，今天整理一下VUE中组件通信六种方式，依次介绍一下各个通信方式。嘻嘻嘻，让我们一起学起来好吧~~~come

方法一props/$emit

父传子：props
子传父：父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件
第一种方法是我们经常用到的方法 我就不写代码来进行展示了，这个比较简单。

方法二：$eimt/$on

说明：上面两种方式处理的是父子组件之间的数据 传递，如果两种组件不是父子关系呢？这种情况下面可以使用中央事件总线的方法。/ 新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件 这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。
具体实现方式：

		    var bus =new Vue();
		  Vue.component('brother2',{
			  data(){
				  return{
					  msg:"hello brother1"
				  }
			  },
			  template:`
			    <div>
				  <p>我是老大 </p>
				  <input type='text' v-model:'msg' @input='passData(msg)'/>
				</div>
			  `,
			  methods:{
				  passData(val){
					  // 触发全局事件globalEvent
					  this.$emit('globalEvent',val)
				  }
			  }
			});
		  Vue.component('brother1',{
			  data(){
				  return{
					  msg:"hello brother1",
					  brother2Msg:''
				  }
			  },
			  template:`
			    <div>
				 <p>我是老二</p>
				 <p> 老大传递过来的数据：{{brother2Msg}}</p>
				</div>
			  `,
			  mounted(){
				  //绑定全局事件globalEvent事件
				  bus.$on('globalEvent事件',(val)=>{
					  this.brother2Msg=val;
					  
				  })
			  }
			  
		  });

  var Event=new Vue();
   Event.$emit(事件名,数据);
   Event.$on(事件名,data => {});
// 假设兄弟组件有三个，分别是A、B、C组件，C组件如何获取A或者B组件的数据
// 组件A、B通过Event.$emit(事件名,数据)将数据传递，组件C通过 Event.$on(事件名,data => {})接受组件A、B传递的数据

方法三：Vuex

vuex 就是一个仓库，仓库里放了很多对象。在state中存放数据源，当组件要更改state中的数据时，必须通过mutation进行，mutation储存的是改变state中数据的操作方法，之后通过actions储存的操作去触发mutation中的方法,由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。

方法四：# Vuex + localstorage

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。
这里需要注意的是：由于vuex里，我们保存的状态，都是数组，而localStorage只支持字符串，所以需要用JSON转换。

方法五： $attrs和$listeners

第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有个子组件B， 组件B下面有组件C，这时如果组件A想传递数给组件C怎么办呢? 如果采用第一种方法，我们必须让组件A通过prop传递信息给组件B, 组件B在通过prop传递信息给组件C；要是组件A和组件C之间有更多的组件 那采用这种方式就很复杂了。vue2.4开始提供了 $attrs和$listeners来解决这个问题 能够让组件A之间传递信息给组件C

                     Vue.component('C',{
			data(){
				return{
					
				}
			},
		 template:`
		     <div>
			   <div  @click='cClickHandler'>{{$attrs.messagec}}</div>
			 </div>
		 `	,
		  methods:{
			  cClickHandler(){
				  alert(1);
				  this.$emit('getCData','我是C的数据')
			  }
		  }
		});
		
		Vue.component('B',{
			data(){
				return{
					
				}
			},
		 template:`
		     <div>
			   <C v-bind="$attrs" v-on="$listeners"> </C>
			 </div>
		 `	,
		  methods:{
			  
		  }
		});
		
		Vue.component('A',{
			data(){
				return{
					
				}
			},
		 props:['message'],
		 template:`
		     <div>
			   <B v-bind="$attrs" v-on="$listeners"> </B>
			   
			 </div>
		 `	,
		  methods:{
			  
		  }
		});
		var App ={
			data(){
				return{
				 msg:'我是父组件的内容',
				 messagec:'hello c'
				}
			},
			methods:{
				
			},
			template:`<div>
			         <p> 这是一个父组件</p>
					 <A :messagec='messagec' v-on:getCData='getCData'> </A>
					 </div>
			`,
			methods:{
				getCData(val){
					console.log(val);
				}
			}
		}

方法六：provide/inject

父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。不论子组件 有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前 父组件的prop属性来获取数据,只要在父组件的生命周期内，子组件都可以调用。

                    Vue.component('Child',{
			data(){
				return{
					msg:''
				}
			},
		 template:`
		     <div>
			   我是孩子{{msg}}
			 </div>
		 `	, 
         inject:['for'],
		 created(){
			 this.msg=this.for;
		 }
		});
	Vue.component('Parent',{
		 template:`
		     <div>
			  <p> 我是父亲</p>
			  </Child>	
			 </div>
		 `	,
		});
		Var App ={
					  data(){
						  return{
							  
						  }
					  },
					 provide:{
						 for:'他爹'
					 },	
					 template:`
					   <div> 
					    <h2>我是入口组件</h2>
						<Parent/>
					   </div>
					 ` 
		} ;