Vue组件之间的通信1.props和$emit是父子组件最常用的2.引用ref//使用子组件的属性this.$refs.child.xxx3.使用$children的父组件和$parent调用子组件this.$children[0].xxx=xxx子组件调用父组件this.$parent.xxx=xxx4.兄弟组件桥接this.$parent.$on(eventName,handler);this.$parent.$emit(eventName,data);5、根据第3、4种方法,可以得到灵感,自己写一个发射器,向上通知向下广播//给父组件NotificationeventVue.prototype.$dispatch=function(eventName,data){let父母=这个。$父母;while(parent){parent.$emit(eventName,data);父母=父母。$父母;}}//向所有子组件通知事件functionbroadcast(){if(this.$children&&this.$children.length){constargs=Array.from(arguments);consteventName=args[0];常量数据=args.slice(1);this.$children.forEach(child=>{child.$emit(eventName,...data);broadcast.apply(child,args);})}}Vue.prototype.$broadcast=function(){广播。apply(this,Array.from(arguments));}6.祖先和后代,可以使用provide和inject,官方的例子不建议修改,最传递初始值后不会改变//ancestorsprovide(){return{form:this}}//descendantsinject:['form']7.ancestors和descendants也可以使用$attrs和$listeners8.任意两个组件之间,可以使用事件总线eventBus或者Vuex(Vuex单独解释)//使用Vue快速定义busVue.prototype.bus=newVue();//自定义busexportdefaultclassBus{constructor(){this.onCache={};这个.emitCache={};this.paramCache={};}$on(eventName,handler){if(!this.onCache[eventName]){this.onCache[eventName]=[];}this.onCache[eventName].push(handler);if(this.paramCache[eventName]){handler(...this.paramCache[eventName])}}$emit(eventName,...data){if(this.onCache[eventName]){this.onCache[eventName]].forEach(fn=>{fn(...数据);});}this.paramCache[eventName]=数据;}$remove(eventName,fn){if(this.onCache[eventName]){if(fn){for(leti=0,len=this.onCache[事件名称].长度;我<伦;i++){if(fn===this.onCache[eventName][i]){this.onCache[eventName].splice(i,1);休息;}}}else{this.onCache[eventName]=undefined;this.paramCache[eventName]=undefined;this.$emitCache[eventName]=undefined;}}}}Vue.prototype.$bus=newBus();使用上面的自定义总线,监听后,记得在组件销毁前移除remove('busEvent',this.onBusEventHandler);}github地址可以查看emitter和eventbus的使用