写了很多vue方面的东西,最近才发现自己居然没有接触过兄弟组件通信这个功能,当我第接触写错了,因此记录下使用方式
,正确写法如下
首先现在 main.js定义下
var bus = new Vue();
Vue.prototype.bus = bus;
新建两个组件,引入到父组件中,比如first组件,last组件
first组件
<template>
<div>
这是first组件的{{msg}}
<el-button @click="sendLast">点击我更新下面的</el-button>
</div>
</template>
事件如下
data(){
return {
msg: ''
}
},
mounted(){
this.bus.$on('sendFirst',(val)=>{
this.msg = val
})
},
methods:{
sendLast(){
this.bus.$emit('sendLast','小弟好')
}
}
last组件
<template>
<div>
这是last组件的{{msg}}
<el-button @click="sendFirst">点击我更新上面的</el-button>
</div>
</template>
事件如下
data(){
return {
msg: ''
}
},
mounted(){
this.bus.$on('sendLast',(val)=>{
this.msg = val
})
},
methods:{
sendFirst(){
this.bus.$emit('sendFirst','小弟好')
}
}
然后在父组件中引入即可
<template>
<div>
<first/>
<last/>
</div>
</template>
这样即可
…