圣诞快乐……虽然现实中踢到了脚蹭掉了一小块皮的我并不大快乐，那就学习使我快乐吧……
摘自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';
});
}
