vue常用的父子组件通信，非父子组件通信

 需求1  【在父组件中触发子组件的方法改变子组件中的值，取子组件的值： ---$refs】

//父：
 <router-view ref='listCom'></router-view>
  methods: {
             fatherFn:function(){
                 this.$refs.listCom.sonFn('query');
                 this.$refs.listCom.getMutex(function(sonData){
                    console.log(sonData);
                    });
             },
  }

 //子：
  sonFn:function(flag){
                  console.log("我是子组件方法")
                 if(flag=='query'){
                     this.selectOption=0;//改变值
                 }
    },
    getMutex：function(callback){
       if(callback) callback(this.idArr)//取值
    },

这种情景属于由父组件控制触发的场景，如果控制是在子组件中，那么，这种就可以使用$emit分发，传值为$emit('getMutex',this.idArr) ；  

需求2  子组件调用父组件的方法：--事件分发$emit

 

 //父：
<son v-on:sonFnEmit='fatherFn(false)'></son>

 fatherFn:function(){
                //逻辑
            },
//子：
  sonFn:function(){
                 this.$emit('sonFnEmit')
 },

 

需求3  子组件取父组件的值
通过公共的vue对象或者store来实现；

取值的话通过子组件的prop绑定就好
子组件：  props:["sonlist"]

父组件 :  <son v-on:sonlist="listdata"></son>
data{listdata:[]}

需求4 两个非父子组件通过共同的父组件，他们之间需要通信：

Module1Fn是子组件Module1的分发事件
Module2Fn是子组件Module2的事件；
LayoutFn是父组件的方法;
 

<son1 v-bind:Module1emitFn="LayoutFn"></son1>
LayoutFn:function(){
                this.$refs.listCom.Module2Fn();
},