Vue组件之$dispatch和$broadcast

$ 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>
相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页