Vue 组件通信六种方法
前言
今天继续加油学习，今天整理一下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>
`
} ;