关于vuejs中的组件通讯

关于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实例的 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;
	      });
	    },
	  }
复制代码