Vue組件之間通訊的三種方式

時間 2019-12-08

標籤 vue 組件之間通訊三種方式简体版

原文原文鏈接

最近在看梁顛編著的《Vue.js實戰》一書，感受很有收穫，特此記錄一些比價實用的技巧。前端

組件是MVVM框架的核心設計思想，將各功能點組件化更利於咱們在項目中複用，這相似於咱們服務端面向對象三大特性之一的封裝，將複雜的會被屢次調用的代碼封裝成組件,在須要調用的地方註冊使用便可。這樣設計的前端代碼方便移植，能夠跨項目複用。vue

組件之間的關係分爲父子組件兄弟組件和跨多級組件等等，在組件之間交互數據，進行通訊主要經過三種方式來進行：app

中央事件總線（非父子組件通訊）
父鏈
子組件索引

下面讓咱們來好好說道說道這三種通訊方式：框架

一.中央事件總線組件化

這個東西名字叫的很唬人，但實際倒是很好理解的一種通訊方式，話很少說，咱們來上代碼。this

<body>
    <div id="app">
        {{message}}
        <tempcomponent-a></tempcomponent-a>
    </div>
    <script>
        var middleware = new Vue();

        Vue.component('tempcomponent-a', {
            template: '<button @click="handleEvent">傳遞事件</button>',
            methods: {
                handleEvent: function () {
                    middleware.$emit('on-message', '來自組件tempcomponent-a的內容');
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted: function () {
                var _this = this;
                middleware.$on('on-message', function (msg) {
                    _this.message = msg;
                })
            },
        });
    </script>
</body>

在上面的代碼中，空的Vue實例"middleware"就是咱們的所謂的中央事件總線，咱們能夠看到，它負責在自組件"tempcomponent-a"中發出事件，在咱們的主體Vue實例app中,經過監聽"middleware"來獲取子組件發出的內容。個人理解是中央事件總線就相似咱們作交換數據的時候的臨時變量同樣，它在中間負責處理結果，而後返回消息給請求者,它的職責就是中介。這個空的vue實例也能夠加入data，methods等選項，這些都是能夠做爲公用的。spa

二.父鏈$parent設計

父鏈這個詞就很好理解啦，顧名思義便是組件的父對象，在組件內部能夠直接經過$parent對父對象進行操做code

<body>
    <div id="app">
        {{message}}
        <tempcomponent-a></tempcomponent-a>
    </div>
    <script>
        Vue.component('tempcomponent-a', {
            template: '<button @click="handleEvent">經過父鏈直接修改數據</button>',
            methods: {
                handleEvent: function () {
                    this.$parent.message = '來自組件tempcomponent-a的消息';
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</body>

經過上面的代碼，咱們能夠看到在自組件內，使用父鏈$parent直接對父對象對屬性操做是很是簡單的。component

三.子組件索引ref&$refs

子組件這個也很好理解，是在父對象上對所擁有對子組件進行操做，通常來講父容器內對子組件會有多個，因此每一個組件須要設置特殊屬性ref來爲自身指定一個惟一名稱。

<body>
    <div id="app">
        <button @click="handleRef">經過ref獲取子組件實例</button>
        <tempcomponent-a ref="comA"></tempcomponent-a>
    </div>
    <script>
        Vue.component('tempcomponent-a', {
            template: '<div>子組件</div>',
            data: function () {
                return {
                    message: '子組件內容'
                }
            }
        });
        var app = new Vue({
            el: '#app',
            methods: {
                handleRef: function () {
                    var msg = this.$refs.comA.message;
                    console.log(msg);
                }
            }
        })
    </script>
</body>