Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览

<Child :getChildValue="getChildValue" /> // 传递的是一个函数

Child组件里面可以使用 this.$attrs.getChildValue() 来调用

<Child @getChildValue="getChildValue" />

Child组件调用 this.$emit('getChildValue', value);

provide: {
    data: '父组件提供的数据'
},


// 在包裹的任何子组件中 都可以使用inject获取数据

Child组件

inject: ['data']

 <Child />          
 <Child1 />

/**
 *  Created By 憧憬
 */
import Vue from 'vue';

export default new Vue;

<template>
    <div class="Child">
        <button @click="sendValue">传递给父组件</button>
    </div>
</template>

<script>
    import bus from '../../bus';
    export default {
        data(){
            return {
                value: 'child - value'
            };
        },
        methods: {
            sendValue() {
                bus.$emit('sendChildValue', this.value);
            }
        }
    };
</script>

<template>
    <div class="Child1">
        <div>
            child1
        </div>
    </div>
</template>

<script>
    import bus from '../../bus';
    export default {
        props: {},
        mounted() {
            this.getValue();        // 在挂载阶段调用 函数 进行监听
        },

        beforeDestroy() {           // 卸载取消
            // 取消监听
            bus.$off('sendChildValue');
        },
        methods: {
            getValue() {
                // 对应分发的键 接收到分发的数据
                bus.$on('sendChildValue', value => {
                    console.log(value);
                });
            }
        },

    };
</script>