使用Bus实现跨组件传输须注意以下3点:
1.需要创建一个空的Vue实例(bus),来作为中间站
2.使用bus.
on来监听事件(在钩子created中监听)
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<my-component></my-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const bus = new Vue({});
Vue.component('my-component',{
template:'<button @click="sendMessage">派发事件</button>',
methods:{
sendMessage:function() {
bus.$emit('on-message', '使用bus派发的事件');
},
}
})
const app = new Vue({
el:'#app',
data:{
message: ''
},
mounted:function(){
let self = this;
bus.$on('on-message',function(msg){
self.message = msg;
})
}
})
</script>
</body>
</html>
参考《Vue.js实战》P80