vue.js组件之间的通信

圣诞快乐……虽然现实中踢到了脚蹭掉了一小块皮的我并不大快乐，那就学习使我快乐吧……

摘自http://blog.csdn.net/mr_fzz/article/details/54636833

1、父组件传递数据给子组件

通过props属性来实现

父组件：

<parent>
  <child :child-msg="msg"></child>  
</parent>

data() {
  return {
    msg: [1, 2, "父组件要传递的信息"]
  };
}

子组件通过props接收数据：

//方式1：
props: {
  childMsg: Array  //指定传入的类型
}

//方式2：指定默认值
props: {
  childMsg: {
    type: Array,
    default: [0, 0, 0]  //指定默认值
  }
}

2、子组件传递数据给父组件

如果子组件想要改变数据呢？这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的。
vm.$emit(eventName, [...args])：触发当前实例上的事件，附加参数都会传给监听器回调，常用于子组件传递信息给父组件。
子组件：

<template>
  <div @click="toParent"></div>
</template>

methods: {
  toParent() {
    //主动触发parentFun方法，'message'是向父组件传递的数据
    this.$emit('parentFun', 'message');  
  }
}

父组件：

<div>
   //监听子组件触发的parentFun事件，然后调用change方法
  <child @parentFun="change" :msg="msg"></child>  
</div>

methods: {
  change(msg) {
    this.msg = msg;
  }
}

3.非父子组件通信

如果两个组件不是父子组件，可以通过eventHub来实现通信。
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.

let Hub = new Vue(); //创建事件中心

组件1触发：

<div @click="eve"></div>
methods: {
    eve() {
        Hub.$emit('change','hehe'); //Hub触发事件
    }
}

组件2接收:

<div></div>
created() {
    Hub.$on('change', () => { //Hub接收事件
        this.msg = 'hehe';
    });
}