Vue 父子组件通信方式

1. 父 --> 子：父组件中用 :xx = "this.xxx"，子组件通过props来接收
2. 子 --> 父：子组件中定义 this.$emit('eventName', data)；父组件中接收：@eventName="callback"
3. 兄弟组件传参，可以使用EventBus：相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。
   • 新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js ；
     import Vue from 'vue';export default new Vue()；
   • 在click组件和show组件中import它：import Bus from 'common/js/bus.js';
   • 传递参数的组件中定义：Bus.$emit('getTarget', data);
   • 接收组件中定义：Bus.$on('getTarget', target => { console.log(target); });
4. 使用vuex状态管理对数据进行统一管理
5. 父 ->子 -> 孙：使用listeners实现祖孙组件之间的数据传递

• 父组件用于动态数据的绑定与事件的定义
  <child1 :one="child1" :two="child2" @test1="onTest1" @test2="onTest2"></child1>
• 子组件的写法：通过设置v-bind="listeners"来充当中间人

<!-- 子组件中通过v-bind='$attrs'接受数据，通过$listeners接收事件 -->
        <child2 v-bind="$attrs" v-on="$listeners"></child2>

 props: ['one','two'],  //可写可不写
    data () {
        return {
            
        }
    },
    inheritAttrs: false,  //父组件传递动态数据后，子组件的默认行为
// 当inheritAttrs设置为true时，父元素动态绑定组件的数据，子组件如果没有通过props接收的话，该属性就会附加于子组件的根元素上。什么意思看代码
    components: {
        child2    
    },
    mounted () {
        this.$emit('test1')  //触发父组件方法的一种方式
        this.$listeners.test2(123)  //触发父组件方法的另一种方式
    }

• 孙组件写法： 通过props或者listeners来获取父组件数据和事件。

<p>props:{{one}}</p>
<p>props:{{two}}</p>
<p>$attrs: {{$attrs['one']}}</p> 

props:['one','two'],  //接收父组件传递的数据，可以不写，通过$attrs来获取
inheritAttrs: false,  //默认行为需要取消
    mounted(){
        this.$emit('test1') //触发父组件方法的一种方式
        this.$listeners.test1(123)//触发父组件方法的另一种方式
    }

6. :star::star:vue 依赖注入：provide、inject 祖先组件和后代组件的数据传输
   祖先组件可以用 provide 给后代组件提供一些数据；后代组件可以使用 inject 接受祖先组件提供的数据

// father
provide: {
  foo: 'bar',
}

// child
inject: ['foo']