IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【Vue2】兄弟组件传参方法总结 -> 正文阅读

[JavaScript知识库]【Vue2】兄弟组件传参方法总结

一、前言

之前汇总过父子组件传参的三种方法,感兴趣的可以看我之前的文章:【vue2】子组件向父组件传参方法汇总_能能爱编程的博客-CSDN博客

现在来总结下兄弟间组件传参的方法。分别是【事件总线】和【消息的订阅与发布】两种方式。

二、事件总线

1、介绍

在main.js中定义一个原型属性作为中间值,然后在兄弟组件之间互相触发和接收即可完成数据的通信。收数据的组件绑定自定义事件,发送数据的组件触发自定义事件

2、案例

定义一个学校组件、一个学生组件。学生点击按钮,发送学生人数给学校组件。

3、实现步骤

(1)定义全局事件总线

在main.js中定义,其中$bus可以任意起名

?(2)在school组件中绑定事件

在页面一加载的时候绑定事件,该语句的意思是,当getNum方法被触发时,就执行回调函数getSchookNum。

?(3)在学生组件中触发

?(4)效果图

?三、消息订阅与发布

1、介绍

借助第三方库实现订阅与发布,其中谁需要数据谁就订阅消息,谁提供数据谁就发布消息。这里使用pubsub.js实现。你也可以选择其他库

2、案例

同样使用上述中的案例

3、步骤

(1)安装第三方库

(2)引入第三方库

? ? ? ? 在两个组件中分别引入:import pubsub from 'pubsub-js'

(3)订阅消息与取消订阅

????????订阅消息使用方法subscribe。其中第一个参数为消息名,第二个参数为回调函数。

不过需要注意的是,如果回调函数直接写作第二个参数处,希望你写箭头函数,否则this就不代表组件实例对象,而是undefined。

? ? ? ? 取消订阅的时候,是传消息的id。每生成一个消息订阅,都会有唯一的一个id。

(4)发布消息

? ? ? ? 使用publish发布消息,其中第一个参数为消息名,需要与接收端一致,第二个参数为所传递的数据

(4)效果

四、总结

上述即为兄弟组件间通信的两种方法,欢迎点赞评论和收藏,我们一起进步。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-06 17:16:21  更:2022-06-06 17:18:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 16:35:07-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码