Web前端 —- 【vue】vue 组件传值（props、全局事件总线、消息的订阅与发布）

目录

前言

父子组件

父传子

子传父

全局事件总线

什么叫全局事件总线

如何创建全局事件总线

如何在组件上获取到这个全局 vc 对象

最常用的创建全局事件总线

兄弟组件

消息订阅与发布

安装

使用

爷孙组件

前言

在上篇文章我们介绍了父子组件之间的传值通信，本文将介绍不仅限于父子组件之间的传值通信，还包括兄弟组件、爷孙组件之间的通信传值。以下方法暂未涉及到 Vue3 中新提供的方法

父子组件

父传子

在父组件中

给需要传递数值的子组件绑定属性

在子组件中

使用 props 配置项接收

传递成功，在页面上成功渲染

以上介绍的是基本的而 props 配置项，props 详情配置项请看这篇文章

子传父

在父组件中

@自定义事件名 =’ 回调函数 ’

也可以通过代码来实现自定义事件绑定

在子组件用

ref=’ 组件名 ’

在 mounted 钩子函数中

this.$refs.ref 定义的组件名.$on(‘ 自定义的事件名 ’，函数)

在子组件中

this.$emit(‘ 自定义事件名 ’，传递的数值)

将子组件中数值传给父组件

传递成功

全局事件总线

什么叫全局事件总线

在介绍兄弟组件和爷孙组件前，先介绍全局事件总线

由上面的子组件向父组件传递数值可以得出

$on：是用来绑定事件的

$emit: 是用来触发事件的

例：

子组件向父组件传递数值

所以子组件使用的是 $emit

父组件使用的是 $on

而 全局事件总线就是在所有的组件外面定义一个全局的 vc 对象，由上面的例子可得

不论是在父组件中用来绑定事件的 $on 前的

this.$refs. 组件实例

还是在子组件中用来触发事件的 $emit 前的

this

都是指向 vc 组件实例的，说明 vc 实例身上是同时拥有 $on 和 $emit 的

此时我们定义一个全局的 vc 对象，所有的组件都可以共享

那么我们定义的这个全局的 vc 对象就叫做全局事件总线

如何创建全局事件总线

既然是创建全局事件对象，所以我们找到 main.js 文件

使用

vue.extend({})

创建构造函数

再 new 一个 vc 实例对象

// 获取 VueComponent 构造函数
const VueComponent = Vue.extend({})
// 创建共享的 vc 对象
const globalvc = new VueComponent()

如何在组件上获取到这个全局 vc 对象

利用 vue 的原型对象，vue 做了特殊处理，vc 也可以获取到 vue 原型对象身上的属性

vue.prototype. 任意的属性名 = 我们创建的 vc 对象

// 拓展原型对象的属性
Vue.prototype.x=globalvc

// 获取 VueComponent 构造函数
const VueComponent = Vue.extend({})
// 创建共享的 vc 对象
const globalvc = new VueComponent()
// 拓展原型对象的属性
Vue.prototype.x=globalvc

最常用的创建全局事件总线

new Vue({render: h => h(App),
  beforeCreate(){Vue.prototype.$bus=this}
}).$mount('#app')

兄弟组件

由上可知全局事件总线可以给任意的组件之间进行通信

将 MyBrother 组件上的数据传给兄弟组件 MySon

在 MySon 组件中

在 MyBrother 组件中

将 data 中的数值传给 MySon

原 MySon 中的 data 数据

当触发自定义事件时，也就是将 MyBrother 组件中的数值传过去

成功传递

消息订阅与发布

与全局事件总线一样可以在任何组件之间通信（但是不常用，建议用全局事件总线）

分为消息发布方和消息订阅方

需要安装 js 第三方库

pubsub-js

pub:publish(发布)

sub:subscribe(订阅)

安装

npm i pubsub-js

使用

发布消息：

 pubsub.publish(‘ 自定义发布消息的名称 ’, 发布的消息)

订阅消息：

后接回调函数，第一个参数是自定义发布消息的名称，第二个参数是发布的消息

  pubsub.subscribe(‘ 与发布消息自定义的名称一致 ’,function(messageName,message){}）

注意，在组件中使用时，需要先导入 import

爷孙组件

在孙组件中

发布消息，将数据传给爷爷组件

在爷爷组件中

在 mounted 钩子函数中

效果

成功传递了数据