Vue實現(xiàn)boradcast和dispatch的示例

更新時間：2020年11月13日 11:44:19 作者：徐四

這篇文章主要介紹了Vue實現(xiàn)boradcast和dispatch的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

這篇內(nèi)容主要是學習掘金小冊vue組件精講的一個案例，自己做下筆記，以免日后忘記。

1.mixins（混入）

我所理解的mixins就是共享，就好比面向?qū)ο罄锩娴脑蚿rototype那種感覺的東西，把相同的邏輯抽離出來便于維護。

先來看下src目錄結(jié)構(gòu)

src                    
├─ components       
│  ├─ A             
│  │  └─ index.vue  
│  ├─ B             
│  │  └─ index.vue  
├─ minixs           
│  ├─ emitter.js     //這個是要混入的js     
├─ store            
│  └─ index.js      
├─ views               
│  └─ Home.vue      
├─ App.vue          
└─ main.js

2.emitter.js

//從外層向內(nèi)層
function broadcast(componentName,eventName,params){
    this.$children.forEach(child=> {
        const name = child.$options.name;
        if(name === componentName)
        {
            child.$emit.call(child,eventName,params)
        }else
        {
            broadcast.call(child,componentName,eventName,params)
        }
    });
}

export default {
    data(){
        return{}
    },
    methods: {
        dispatch(conponentName,eventName,params){
            let parent = this.$parent || this.$root;
            let name = parent.$options.name;
            while(parent && (!name || name !==conponentName))
            {
                parent = parent.$parent;
                if(parent)
                {
                    name = parent.$options.name;
                }
            }
            if(parent)
            {
                parent.$emit.call(parent,eventName,params)
            }
        },
        broadcast(componentName, eventName, params){
            broadcast.call(this, componentName, eventName, params);
        }
    }
}

methods 里定義的 dispatch 和 broadcast 方法會被混合到組件里，自然就可以用 this.dispatch 和 this.broadcast 來使用。

這兩個方法都接收了三個參數(shù)，第一個是組件的 name 值，用于向上或向下遞歸遍歷來尋找對應(yīng)的組件，第二個和第三個就是上文分析的自定義事件名稱和要傳遞的數(shù)據(jù)。

可以看到，在 dispatch 里，通過 while 語句，不斷向上遍歷更新當前組件（即上下文為當前調(diào)用該方法的組件）的父組件實例（變量 parent 即為父組件實例），直到匹配到定義的 componentName 與某個上級組件的 name 選項一致時，結(jié)束循環(huán)，并在找到的組件實例上，調(diào)用 $emit 方法來觸發(fā)自定義事件 eventName。broadcast 方法與之類似，只不過是向下遍歷尋找。

3.具體的使用

A是B的父組件

//🌵組件A
<template>
<div class="main">
    <button class="btn" @click="handleClick">父組件A---觸發(fā)事件</button>
    <B></B>
</div>
</template>

<script>
import B from '../B';
import emitter from '@/minixs/emitter';
export default {
    name: 'A',
    data() {
        return {};
    },
    //測試dispatch
    created() {
        this.$on('on-message', this.showMessage);
    },
    mixins: [emitter],
    components: {
        B,
    },
    methods: {
      //broadcast測試
        handleClick() {
            this.broadcast('B', 'on-click', 'Hello Vue.js');
        },
        showMessage(msg) {
            alert(msg);
        },
    },
};
</script>

<template>
<div class="b">
    我是子組件B
    <button @click="dispatchtest">dispatch發(fā)射~！🚀</button>
</div>
</template>

<script>
import emitter from '@/minixs/emitter';
export default {
    name: "B",
    mixins: [emitter],
    created() {
        this.$on('on-click', this.showMessage);
    },
    methods: {
        showMessage(text) {
            window.alert(text);
        },
      //dispatch派發(fā)測試
        dispatchtest() {
            this.dispatch("A", "on-message", "我就是全宇宙最善良的仔~！")
        }
    }
}
</script>

效果圖：