兄弟组件之间的数据共享
在 vue2.x 中,兄弟组件之间数据共享的方案是 EventBus。
EventBus 的使用步骤:
① 创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象
import Vue from 'vue'
export default new Vue()
② 在数据发送方,调用 bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件
<button @click="sendMsg">发送</button>
<script>
import bus from './eventBus.js'
export default {
data(){
return {
msg:'23.18'
}
},
methods:{
sendMsg(){
bus.$emit('share',this.msg);
}
}
}
</script>
③ 在数据接收方,调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件
<p>{{msgFromLeft}}</p>
<script>
import bus from './eventBus.js'
export default {
data(){
return{
msgFromLeft:''
}
},
created(){
bus.$on('share',(val)=>{
this.msgFromLeft = val;
})
}
}
</script>