Vue组件之$dispatch和$broadcast

迈不过友情╰ 2022-10-01 05:52 15阅读 0赞

$ dispatch 主要是事件流由当前组件往父组件流动，当满足一定条件的时候就会触发当前子组件的监听事件，$broadcast 的功能是事件流由当前组件向子组件流动，当满足一定条件的时候就会触发当前子组件的监听事件。也就是说 $dispatch 和 $broadcast 主要解决了父子组件、嵌套父子组件的通信，但是没有解决兄弟组件的通信问题。所以后面被遗弃了。  
如果要用这两个方法的话，就先在主js文件即main.js文件里面自己封装一下这两个方法，然后就可以在组件里面直接拿来用。封装好的如下：

import Vue from 'vue'
    import App from './App'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.config.productionTip = false
    
    //封装$dispatch函数
    Vue.prototype.$dipatch = function(eventName,data) {
    	//向上传递，一直不停的获取$parent
    	let parent = this.parent//this是当前所在组件的vue实例，先获取到当前组件的父组件
    	while(parent) {//判断是否存在父组件
    		parent.$emit(eventName,data);
    		parent = parent.$parent
    	}
    }
    
    //封装$broadcast函数
    Vue.prototype.$broadcast = function() {
    	boradcast.call(this.eventName,data)
    }
    function broadcast(eventName,data) {
    	this.$children.forEach(child => {
    		child.$emit(eventName,data);
    		if(child.$children.length) {
    			broadcast.call(this.eventName,data)
    		}
    	})
    }
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: {App},
      template: '<App/>'
    })

然后对$dispatch进行使用  
//app.vue文件

<template>
      <div class = 'app2'>
        我是grandFather: {
       {msg}}
        <son></son>
      </div>
    </template>
    <script>
       import son from './components/son'
       export default {
         components:{
         son
         },
         data() {
           return {
             msg:''
           }
         },
         mounted() {
           this.$on('dispatch',msg => {
             this.msg = msg
           })
         }
       }
    </script>

//son文件

<template>
      <div class = 'son'>
        <grandson></grandson>
      </div>
    </template>
    <script>
        import grandson from './grandson'
        export default {
         name:'son',
         components:{
           grandson
         }
       }
    </script>

//grandson文件

<template>
      <div class = 'grandson'>
        <input type = 'button' @click = 'doDispatch'/>
      </div>
    </template>
    <script>
       export default {
        name:'grandson',
        methods:{
          doDispatch() {
            this.$dispatch('dispatch','来自grandson的消息')
          }
        }
       }
    </script>