使用Bus实现跨组件传输须注意以下3点:
1.需要创建一个空的Vue实例(bus),来作为中间站
2.使用bus.emit来发送事件3.使用bus.emit来发送事件 3.使用bus.emit来发送事件3.使用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
