关于vuejs中的组件通信

在项目中经常会用到vue的组件通信，但是一直没总结下。今天稍微不那么忙，来总结下vue2.0中组件通信的方法，非vuex。

vue中的组件通信方式可分为两大类，一类是父子组件通信，一类是兄弟组件通信。其中第一类又可分为父组件向子组件通信和子组件向父组件通信，关于这一类，vue官网如此描述：

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过自定义事件给父组件发送消息。

父子组件通信的方法可以总结为“props down，events up”。关于兄弟组件通信的方法常用为eventBus,主要途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

1. 父子通信之父传子

在父组件使用子组件的地方绑定数据，然后在子组件中显式地用 props 选项声明它预期的数据。

静态数据

/父组件father.vue/ //template //javascript import son1 from './son1.vue' export default { data() { return {
```
        }
    },
    components:{son1},
  }
复制代码
```
/子组件son1.vue/ //template

我是子组件son1,这是父组件给我的消息--> {{msg1}}
//javascript export default { props:['msg1'], }
动态数据

/父组件father.vue/ //template //javascript import son2 from './son2.vue' export default { data() { return { fatherMessage:"小儿子，喊你哥一起回家吃饭了", } }, components:{son2}, }

/子组件son2.vue/ //template

我是子组件son2,这是父组件给我的消息--> {{msg2}}
//javascript export default { props:['msg2'], }

2. 父子通信之父调用子

利用ref将子组件挂载到父组件的$refs对象上。插一段vuejs官网关于ref的介绍

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

/*父组件father.vue*/
  //template
  <button @click="son1SayHello">让son1说"hello"</button>
  <son1 ref="son1"></son1
  //javascript
  import son1 from './son1.vue'
  import son2 from './son2.vue'
  export default {
      data() {
          return {
           
          }
      },
      components:{son1,son2},
      methods:{ 
       son1SayHello() {
         //通过在子组件上引用ref,从而获得子组件实例，进行相应操作。
         this.$refs.son1.sayHello()
       }
      }
  }
  
/*子组件son1.vue*/
  //template
  //javascript  
   export default {
	      data() {
	         return { 
	         }
	      },  
	    methods:{
	          sayHello() {
	              alert("hello")
	          }
	    }
    }
复制代码

3. 父子通信之子调用父

在子组件中利用$emit触发一个名为‘receiveSon2Message’的自定义事件，并将数据出去。然后在父组件中使用子组件的地方利用v-on绑定自定义事件‘receiveSon2Message’，并在自定义事件对应的方法里操作接收来的数据。

/*子组件son2.vue*/
  //template
   <button @click="sendMessageToFather">和爸爸说"ok"</button>
  //javascript
   export default {
	    data() {
	      return {
	        son2MessageToFather:"ok，爸爸！",
	      }
	    },
	    methods:{
	      sendMessageToFather() {
	        //利用自定义事件在子组件传递数据到父组件的流程
	        //点击子组件中的按钮（触发click事件）--> 执行子组件方法sendMessageToFather --> 通过$emit --> 触发父组件receiveSon2Message事件并传递子组件的数据 --> 执行父组件的showMessage方法
	        this.$emit('receiveSon2Message',this.son2MessageToFather)
	      },  
	    }
 }

/*父组件father.vue*/
  //template
   <son2  @receiveSon2Message="showSon2Message"></son2>
  
  //javascript  
  import son1 from './son1.vue'
  import son2 from './son2.vue'
  export default {
      data() {
          return {
              massageFromSon2:''
          }
      },
      components:{son1,son2},
      methods:{
        //最终点击子组件son2的"和爸爸说ok"按钮所执行的方法 son2Data是其传递过来的数据
        showSon2Message(son2Data) {
          console.log(son2Data);
           this.massageFromSon2 = son2Data;
        },	    
      }
  }
复制代码

3. 兄弟通信

利用eventBus,就是先创建一个bus.js，在这js里面使创建一个空的 Vue 实例作为*事件总线

/*bus.js*/
 import Vue from 'vue'
 export  default new Vue();
复制代码

然后在需要通信的兄弟组件中引入bus.js ，在主动通信的组件中用空vue实例的关于vuejs中的组件通信 on方法监听自定义事件并接收数据。（下例中为son2组件向son1组件通信，son2为主动通信的组件）

/*兄弟组件son2.vue*/
  //template
   <button @click="sendMessageToBrother">喊哥哥回家吃饭</button>
  //javascript
   import Bus from './bus.js'
   export default {
	    data() {
	      return {
	        son2MessageToBrother:"哥，回家吃饭",
	      }
	    },
	    methods:{
	      sendMessageToBrother() {
	        Bus.$emit('jj', this.son2MessageToBrother);
	      }
	    }
	  } 


/*兄弟组件son1.vue*/
      //template
       <h4>我是子组件son1,这是兄弟组件son2给我的消息--> {{msgFromBrother}}</h4>
      //javascript
      import Bus from './bus.js'
	  export default {
	    data() {
	      return {
	        msgFromBrother:''
	      }
	    },
	    created() {
	      var self = this;
	      Bus.$on('jj', function (data) {
	        console.log(data);
	        self.msgFromBrother = data;
	      });
	    },
	  }
复制代码

关于vuejs中的组件通信