组件间通信

一、props/$emit 父子

父：<article :article="articleList" @onEmitIndex="onEmitIndex"></article>
子:props:['article']
   @click="emitIndex(index)"
   methods:
   		emitIndex(index){
			this.$emit('onEmitIndex',index)		
   		}
	

二、$children、$parent 父子

父：<button @click="changeA">
    methods: {
    	changeA(){
    		this.$children[0].messageA = '1'
    	}
    }
子：computed(){
		parentval(){
			return this.$parent.msg
		}
}

拿到的都是组件实例，代表可访问所有方法和data $children的值是数组，$parent是对象

三、Ref 获取实例的方式调用组件的属性或者方法 父->子

ref两个作用::

1. 获取DOM对象
2. 获取子组件实例

//父
<child ref="child"></child>
onstageChange(){this.$refs['child'].update()}
//update是子组件的方法

四、祖先后代 Provide、inject一般用于设计组件库

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
provide/inject响应传值

data() {
      return {
        knowledge: {
          knowledgeId: ''
        }
      }
    },
    provide() {
      return {
        // 直接传对象
        kData: this.knowledge
      }
    },
    created() {
      // 变更data属性knowledge下的knowledgeId元素值
      this.knowledge.knowledgeId = 2
	}
	
inject: ['kData'],
    mounted() {
      console.error('yc:' + this.kData.knowledgeId)
    }

五、$dispatch 和 $broadcast

前者用于向上级派发事件，只要是它的父级（一级或多级以上），都可以在组件内通过 $on 监听到，后者相反，是由上级向下级广播事件的。Vue2中已经废弃了，但是element-ui中用的是这种方法

//main.js
Vue.prototype.$dispatch = function(eventName,data){
	let parent = this.$parent
	while(parent){
		parent.$emit(eventName,data)
		parent = parent.$parent
	}
}

Vue.prototype.$broadcast = function(){eventName,data}{
	broadcast.call(this,eventName,data)
} 
function broadcast(eventName,data){
	this.$children.forEach(child=>{
		child.$emit(eventName,data)
		if(child.$children.length){
			broadcast.call(child,eventName,data)
		}
	})
}

//孙子
@click = 'dispatch'
methods:{
	dispatch(){
		this.$dispatch('dispatch','grandchild')
	}
}
//App
mounted(){
	this.$on('dispatch',msg=>this.msg=msg)
}

六、EventBus

基于$on和$emit，所以实例化一个Vue实例挂载在prototype上,用在父子组件兄弟组件 Vue.prototype.$bus = new Vue

//子
addition(){
	this.$bus.$emit('add',{num:this.num++})
}
//兄
mounted(){
	this.$bus.$on('add',param=>{this.count= this.count+param.num})
}

七、Vuex