2019-02-14 vue组件基础篇3

非父子组件通信

1.使用一个空的Vue实例作为中央事件总线(bus)
2.bus.$emit('key', 'textcontent')
3.Vue实例app初始化时，在mounted钩子函数里监听来自bus的事件

<div id="app">
      {{ message }}
        <component-a></component-a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        var bus = new Vue();

        Vue.component('component-a', {
            template: '<button @click="handleEvent">传递事件</button>',
            methods: {
                handleEvent() {
                    bus.$emit('on-message', '来自component-a的内容');
                }
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted: function() {
                var _this = this;
                bus.$on('on-message', function(msg) {
                    _this.message = msg;
                })
            }
        })
</script>