vue组件间的通信可以分为：

• 父子组件之间的通信；
• 非父子组件之间的通信。    

一、父子组件间的通信：

    1. 父组件向子组件传值。

        父组件向子组件传值：

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

data(){
    return {
        msg: [1,2,3]
    };
}

        子组件通过props来接收数据（以下三种方式都可以）

props: {
    msg: Array 
}

props: ['msg']

props: {
    msg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

    2. 子组件想父组件传值。

        通过$emit来触发，$on来监听变化。

子组件:
<template>
    <div @click="up"></div>
</template>

methods: {
    up() {
        this.$emit('upup','hehe');
    }
}

<div>
    <child @upup="change" :msg="msg"></child> 
</div>
methods: {
    change(msg) {
        this.msg = msg;
    }
}

3. 非父子组件之间传值

    可以通过创建一个eventHub事件中心，来实现。

    第一步创建事件中心： let Hub= new Vue();

    第二步触发：Hub.$emit('change',value);

    第三步接收：   Hub.$on('change',(value) => {

                                this.msg = value;

                            })

    Hub就是一个中转中心。

4. 复杂的网站直接传值可以使用vuex来实现传值，简单的就没有必要，否则只能增加代码的冗余度。

    要使用vuex必须要在你的项目中引用，

    第一步：npm install vuex --save;

    第二步：import Vuex from 'vuex'

                 Vue.use(Vuex)；

    第三步：export default new Vuex.Store({})。

    当然也可以使用全局script标签引用vuex，这样就不需要上述步骤啦。