Vue组件通信的六种方式，你会几个？

展开全文

在平时的开发过程中，父子 / 兄弟组件间的通信是肯定会遇到的啦，所以这里总结了 6 种 Vue 组件的通信props / $e$emit / Vuex$attrs / $listeners

$parent / $children 与 ref
provide / inject

前言

如上图所示，A/B，B/C，B/D 组件是父子关系，C/D 是兄弟关系。那如何根据不同的使用场景，选择不同的通信方式呢？所以前提就是我们要了解不同的通信方式的作用和区别。

一. props / $emit

这个是我们平时用得比较多的方式之一，父组件 A 通过 props 参数向子组件 B 传递数据，B 组件通过 $emit 向 A 组件发送一个事件（携带参数数据），A组件中监听 $emit 触发的事件得到 B 向 A 发送的数据。我们来具体解释下它的实现步骤：

1：父组件向子组件传值

// App.vue 父组件
<template>
    <a-compontent :data-a="dataA"></a-compontent>
</template>
<script>
import aCompontent from './components/A.vue';
export default {
    name: 'app',
    compontent: { aCompontent },
    data () {
        return {
            dataA: 'dataA数据'
        }
    }
}
// aCompontent 子组件
<template>
    <p>{{dataA}}</p> // 在子组件中把父组件传递过来的值显示出来
</template>
<script>
export default {
    name: 'aCompontent',
    props: {
        dataA: {           //这个就是父组件中子标签自定义名字
            type: String,
            required: true  // 或者false
        }
    }
}
</script>
复制代码

2：子组件向父组件传值（通过事件方式）

// 子组件
<template>
    <p @click="sendDataToParent">点击向父组件传递数据</p>
</template>
<script>
export default {
    name: 'child',
    methods:{
        changeTitle() {
            this.$emit('sendDataToParent','这是子组件向父组件传递的数据'); // 自定义事件，会触发父组件的监听事件，并将数据以参数的形式传递
        }
    }
}

// 父组件
<template>
    <child @sendDataToParent="getChildData"></child>
</template>
<script>
import child from './components/child.vue';
export default {
    name: 'child',
    methods:{
        getChildData(data) {
            console.log(data); // 这里的得到了子组件的值
        }
    }
}
</script>
复制代码

二. $emit / $on

这种方式是通过一个类似 App.vue 的实例作为一个模块的事件中心，用它来触发和监听事件，如果把它放在 App.vue 中，就可以很好的实现任何组件中的通信，但是这种方法在项目比较大的时候不太好维护。

举个