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

憧憬。 -

父子组件通信

简单来说就是利用回调函数获取value

  • 直接传递属性
<Child :getChildValue="getChildValue" /> // 传递的是一个函数

Child组件里面可以使用 this.$attrs.getChildValue() 来调用
  • 通过@方式传递

<Child @getChildValue="getChildValue" />

Child组件调用 this.$emit('getChildValue', value);
  • 利用$parent和$children相互通信 （官网不太支持你们这样搞，小心点）

this.$parent   获取父组件实例 可以使用父组件实例的属性
this.$children 获取子组件数组 可以利用下标调用子组件实例的属性

爷孙组件通信

  • 爷孙组件之间是不能直接通信的，但可以构造成两个父子组件，通过父组件来传递数据

虽然不能通信，但是传递数据还是ok的

  • provide + inject

这种数据传递并不是响应式的

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


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

Child组件

inject: ['data']

兄弟组件通信

场景:

 <Child />          
 <Child1 />
  • 简单粗暴的办法
    Child组件先传递给父组件,然后再由父组件传入Child1这个组件，具体不多赘述
  • Vuex这个后面会写文章，现在也不多说，但是是个解决方案
  • Event Bus数据总线 创建公共类

主要就是利用一个公共的vue类 进行事件的分发，然后再利用这个类接收。

示例:
  • 创建bus.js
/**
 *  Created By 憧憬
 */
import Vue from 'vue';

export default new Vue;
  • Child组件
<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>
  • Child1组件
<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>

本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。