vue不同组件传参，非父子组件通信。

当我们需要通过不同的组件来传递数据的时候：

1.父组件传递数据给子组件，可以通过props属性来实现；

<parent>

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

</parent>

data(){

return {

msg: [1,2,3]

};

}

子组件通过props来接收数据: 

方式1：props: [ 'childMsg' ]

方式2：props: {

                childMsg: Array    //这里可以制定传入的类型

             }

方式3：props: {

                 childMsg: {

                     type: Array,

                     default: [0,1,2]   //这里可以指定默认值

                 }

             }

2.子组件与父组件通信，这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变父组件数据的目的；

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

methods: {
    onClick() {
        this.$emit('getmsg',msg); //主动触发getmsg方法，msg为向父组件传递的数据
    }

}

父组件：

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

</div>

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

3.有时候我们会出现非父子组件通信，比如当我们在A页面的某个按钮上面绑定事件，点击后需要将信息传入B页面。当然在vue中有推荐了我们去使用vuex去数据交互，Vuex会让你的Vue代码足够灵活可控，把数据统一存入state, 只允许通过Actions触发Mutations修改。然而，有时候我们的项目并没有复杂到需要用上Vuex。，（我们也不讨论已经废除的vm.$dispatch）很多情况下我们都是需要一个事件的捕获，这时候我们就可以用到vue的eventbus了。

1）首先在main.js中

Vue.prototype.$bus = new Vue;

2）A组件中通过触发事件，来传递数据

1. methods: {  
2.    addCart(event) {  
3.        this.$bus.$emit('getTarget', message); 
4.    }  
5. }  

3）B组件，这里我们在A组件中每次点击，都会在bus中触发这个名为'getTarget'的事件，并将点击事件的event.target顺着事件传递出去。

接着，我们要在show组件中的created()钩子中调用bus监听这个事件，并接收参数：

created（）{

    this.$bus.$off('getTarget'); //为了避免事件被多次触发，先手动销毁该事件。

    this.$bus.$on(' getTarget', (message) => {

    coonsole.log(message);

    });

}