Vue实现boradcast和dispatch的示例

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

//从外层向内层
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);
        }
    }
}

//🌵组件A
<template>
<div class="main">
    <button class="btn" @click="handleClick">父组件A---触发事件</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发射~！🚀</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派发测试
        dispatchtest() {
            this.dispatch("A", "on-message", "我就是全宇宙最善良的仔~！")
        }
    }
}
</script>