非父子組件通訊-中央事件總線

時間 2019-11-17

標籤父子組件通訊中央事件總線欄目主板简体版

原文原文鏈接

寫在前面

上一篇講了父子組件的通訊，那麼非父子組件間如何通訊呢？在vue.js 2.x中，用一個空的Vue實例做爲中央事件總線與兩個跨級組件進行通訊，在通訊的過程當中兩個跨級組件互不聯繫。vue

文章的開始

前面大概介紹了中央事件總線的過程，具體如何進行看個栗子。bash

<body>
    <div id="app">
        {{ message }}
        <component-a></component-a>
    </div>
    <script>
        var bus = new Vue();
        Vue.component('component-a',{
            template: '<button @click="handleEvent">傳遞-事件</button>',
            methods: {
                handleEvent:function () {
                    bus.$emit('on-message','來自組件commponent-a的內容');
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted: function (){
                var _this = this;
                //在實例初始化時，監聽來自bus實例的事件
                bus.$on('on-message',function (msg) {
                    _this.message = msg;
                }) ;
            }
        })
    </script>
</body>
複製代碼