Vue组件之间如果不是父子组件,数据传递问题:
这样一个需求:
两个兄弟组件均自定义了一个count值,需要在点击的时候将点击组件的count值,赋值给其兄弟组件的count
DOM结构:
<div id="app">
<children count="a"></children>
<children count="b"></children>
</div>
首先注册Vue
let app =new Vue({
el:'#app',
})
创建事件总线
Vue.prototype.bus=new Vue();
创建组件
Vue.component('children',{
template:`<div @click="changeClick">{{selfCount}}</div>`,
props:['count'],
data(){
return {selfCount:this.count}
},
methods:{
changeClick(){
this.bus.$emit('change',this.count)
},
},
mounted:
function(){
let _self=this;
this.bus.$on('change',function (msg) {
_self.selfCount=msg
})
}
})
注意点:
- 在vue父子组件之间传值,默认是单项的,子组件不可以直接修改父组件传递过来的参数,如果需要修改,需要先接收一下再进行修改
- mounted里面注意保存this,也可直接使用箭头函数
this.bus.$on('change', (msg)=>{
this.selfCount = msg
})