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>

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

您的支持是对我最大的鼓励!

发表于: 作者:憧憬。
关注互联网以及分享全栈工作经验的原创个人博客和技术博客,热爱编程,极客精神
Github 新浪微博 SegmentFault 掘金专栏