关于Vue组件通讯那点事

Github

抽空梳理了一下Vue常用的组件之间的通讯方式，然后想通过使用的技术进行分类整理笔记。

Prop传值

使用范围

父组件向子组件传值。

使用方法

父组件

export default {
    name: 'App',
    components: {
        Component1,
    },
    data(){
        return{
            text1:"Text From App.vue",
        }
    }
}

子组件

效果展示

截屏2020-10-13 上午9.55.04.png

注意

父组件通过Prop传值给子组件是属于单向数据流，因此当父组件修改该值的时候，子组件也会随之更新数据；而子组件是不应该在内部改变 prop的。如果你可以这么做，但是Vue不推荐此做法，并会在控制台发出警告。

v-on事件绑定

使用范围

子组件调用父组件方法。

使用方法

父组件

子组件

效果展示

Kapture 2020-10-13 at 16.51.21.gif

注意

this.$emit() 的第一个参数为事件绑定的EventName，而从第二个参数开始为函数的参数，可以传多个参数值，意味着可以通过此方法从子组件传值给父组件。

ref组件注册

适用范围

父组件获取子组件的值或调用子组件的方法。

使用方法

父组件

子组件

效果

Kapture 2020-10-13 at 17.20.54.gif

注意

this.$refs 是组件渲染后才会进行填充，因此无法在计算属性 computed 使用，打印出来会显示 undefined 。

EventBus事件总线

使用范围

任意组件间的事件调用。

使用方法

初始化EventBus

共有两种方式可以初始化EventBus，第一种方式是新建一个 eventBus.js ，内容如下：

import Vue from 'vue'
export const EventBus = new Vue()

然后使用时均在两个组件内引入该文件。

import { EventBus } from "../eventBus.js";

而第二种方式是全局注册EventBus。

在项目的 main.js 文件下，插入注册代码：

Vue.prototype.$EventBus = new Vue()

然后使用时即可通过 this.$EventBus 调用。

后面的案例均用第二种方法实现。

第一个组件

第二个组件

效果

Kapture 2020-10-13 at 17.41.28.gif

注意

虽然在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，使得所有组件都可以上下平行地通知其他组件，但是若使用不慎，就会造成难以维护的“灾难”。

Vue是单页应用，如果你在某一个页面刷新了之后，与之相关的 EventBus 会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面， EventBus 在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理 EventBus 在项目中的关系。通常会用到，在vue页面销毁时，同时移除 EventBus 事件监听。

移除EventBus 事件监听的方法如下：

// 移除指定事件
this.$EventBus.$off('changeCount')

// 移除所有事件
this.$EventBus.$off()

$parent与$children

使用范围

通过插槽嵌套的父子组件进行事件调用和传值。

使用方法

App.vue

父组件

子组件

效果

Kapture 2020-10-13 at 18.14.55.gif

注意

同 $refs ， $parent 和 $children 是组件渲染后才会进行填充，因此无法在计算属性 computed 使用。

$children 返回的是一个数组，一个父组件可能有多个子组件，但一个子组件只能有一个父组件。

provide与inject

使用范围

父组件向任一后代组件传值和方法，适用于正常嵌套和插槽嵌套。

使用方法

App.vue

父组件

子组件

孙组件

效果

Kapture 2020-10-13 at 18.31.59.gif

$attrs与$listeners

使用范围

孙组件获取祖组件的值或调用祖组件事件。

使用方法

祖组件

父组件

孙组件

效果

Kapture 2020-10-13 at 20.34.35.gif

注意

$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。因此当 text1 已被子组件prop获取后，在孙组件是获取不到 text1 的。