父子组件通信中数据的传递eventBus

最新推荐文章于 2022-07-13 22:55:55 发布
最新推荐文章于 2022-07-13 22:55:55 发布
阅读量250 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41442428/article/details/101213305
版权

对于通信中数据的传递，有两种方法，一种是用vuex，vuex属于比较便捷的方法，而且后期的维护也比较好。
适合大型的项目。另一种方法是用eventBus（事件总线）eventBus其实就是组件之间的桥梁。可以向这一座桥注册发送事件或者接收事件。缺点就是使用不慎，后期难以维护。
那么小型的项目，我们可以用eventBus。怎么用呢？
先导入
在这里插入图片描述
$emit触发或者发送这个事件。toTopicTree是方法名
在这里插入图片描述
接收这个方法，并把他存入这个接口去
在这里插入图片描述

哆啦A敏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
「VUE架构」Vue2.0 EventBus父子组件通信（传参）
AIGC大前端小王子
07-17 1171
本文主要介绍Vue2.0之EventBus父子组件通信（传参），有别于之前的父子组件的传参都有着异曲同工之妙。 一、初始化 首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。 新创建一个 .js 文件，比如 eventBus.js 。文件目录建议放在根目录>>src>>assets>>js>> eventBus.js imp......
事件总线（EventBus）,父子、兄弟组件间通信，一个页面调用另一个页面的方法 & 使用eventbus遇到的问题（多次触发、第一次不触发）
金乌的博客
11-25 3611
组件通信时，有时两个组件之间毫无关系，或者他们之间的结构复杂，这时就要用到 vue 中的事件总线 EventBus的概念。EventBus 又称为事件总线。EventBus的用途：1.解决一个页面调用另一个页面的方法2.解决父子组件、兄弟组件间的通信。
vue递归组件eventBus策略解决父子组件通讯问题
S筱潇S四维Smile
04-22 1434
一、首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。 创建一个bus.js文件代码如下 import Vue from 'vue' export var bus = new Vue() 二、父组件在created里面定义$on监听事件 import {bus} from '../../bus.js' created(){ bus.$on('bindFuction', (res) => { console.log(re...
vue传值
weixin_45690699的博客
10-28 142
父组件给子组件传值 父组件 <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :in...
Android EventBus的使用（传值）
weixin_42630638的博客
07-17 1075
1.导入依赖 implementation 'org.greenrobot:eventbus:3.0.0' 2.创建一个类，用来携带参数 public class StringEvent { private final String msg; public StringEvent(String msg) { this.msg=msg; } public String getMsg() { return msg; } }
vue组件传值（父子组件传值与EventBus中间实例实现任意组件传值）
qq_35999569的博客
11-17 528
vue组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件传值</title> <style> #app>div {
vue中的event bus非父子组件通信解析
08-29
vue中的event bus非父子组件通信解析 Vue中的Event Bus是实现非父子组件通信的一种有效方法。Event Bus是指一个中央事件总线，用于在不同的组件之间传递事件和数据。下面我们将对Event Bus的概念、实现和应用进行...
Vue EventBus自定义组件事件传递
08-27
这在处理非父子组件之间的通信时特别有用，因为它避免了过度依赖和复杂的依赖关系。 在案例中，有两个子组件`SearchInput.vue`和`SearchItem.vue`，以及一个父组件`StateView.vue`。`SearchInput.vue`包含一个...
Vue组件通信中非父子组件传值知识点总结
10-15
在组件通信中，常见的有父子组件之间的通信，而本文将重点探讨非父子组件之间的值传递，即如何在没有直接关系的组件之间共享数据。 在Vue中，非父子组件的通信通常依赖于事件总线（Event Bus）或者Vuex状态管理库。...
vue通信方式EventBus的实现代码详解
12-03
1. **Props和自定义事件($emit/$on)**：这是Vue中最基本的父子组件通信方式，通过props向下传递数据，通过$emit向上触发事件。 2. **Vuex**：是一个集中式的状态管理库，适用于大型项目，提供了一套统一的方式来...
从$emit 到 父子组件通信 再到 eventBus
weixin_34409357的博客
09-01 177
故事还是得从$emit说起，某一天翻文档的时候看到$emit的说明 触发当前实例上的事件？就是自身组件上的事件呗，在父子组件通信中，父组件通过props传递给子组件数据（高阶组件可以用provide和inject），由于这是单向数据流，为了保证复用组件的的时候出现数据错乱。 那么只能通过在子组件里面去触发一个事件，来让父组件自己更新数据。 那么问题来了,$emit不是说好的触发当前实例上...
vue 父子组件传递数据的几种方式 props，$emit, eventbus, provide/inject
还不是【web】的博客
04-29 695
1：常用的是props和$emit的方式来处理，也是最常用的方式 a:父组件传值到子组件 父组件 <parent> <child :message="msg"></child> </parent> data(){ return { msg: "this is parent message" } ...
Vue的父子组件通信(十种)
热门推荐
白天不懂夜的黑
01-24 3万+
设计的面试题 Vue中父子组件通信有哪些方式? 概述 通信方式无外乎就那几种: Prop 常用 $emit 组件封装用的较多 .sync 语法糖 (较少) $attrs和$listeners(组件封装用的较多) provide和inject(高阶组件/组件库用的较多) 其他方式通信 详情 1 Prop 我们用的最多方式，可以通过Prop向子组件传递数据。 用一个形象的比喻来说，父...
vue中的父子组件传值props和$emit(event,args)
SeeU
07-24 694
props 父组件传值：<div :propA='data'> 子组件接收值： props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: {
Vue父子组件之间的参数传递
实践求真知
09-06 4994
目录 一组件之间的参数传递——父传子 1原理说明 2代码 3效果 二组件之间的参数传递——子传父 1原理说明 2代码 三以事件发射的方式实现子传父 1原理 2代码 3效果 一组件之间的参数传递——父传子 1原理说明 通过子组件的 props部分，来指明可以接收的参数，父组件通过在标签中写明参数的健值对来传递参数。 props是表示一个组件的参数部分，props的写法有两种： a通过数组来定义 props:['myprop1','mypro...
使用eventBus 实现兄弟组件间通信
Y_东东的博客
06-25 1169
1.在list组件中每个选项绑定点击事件，并通过eventBus.$emit触发选中项。 2.在alert弹窗组件中使用eventBus.$on接收list组件传递来的选中项并控制自身显示。 &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;amp;amp;qu
Vue组件通信——父子组件通信的四种方法
weixin_44001906的博客
07-13 1万+
引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)，第二个参数：引入的组件名（一般都与组件名保持一致） 之后就可以全局使用组件了 局部引入 在父组件中引入 import ChildrenDemo from '@/views/components/Ch
解决返回上一级this.$router.go(-1)页面不刷新的问题
qq_41442428的博客
02-17 9768
需求：给你一维数组，里面是通过父节点的id与子元素挂钩。 dataList: [ { “gid”: 1, “parentId”: null, “name”: “评价0”, “siblingId”: 0 }, { “gid”: 2, “parentId”: null, “name”: “评价1”, “siblingId”: 1 }, { “gid”: 3, “parentId”: null, “na...
vue父子组件怎么通信
最新发布
03-29
Vue父子组件通信的方式有以下几种： 1. Props和$emit：父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件传递数据。 2. $refs：父组件通过$refs获取子组件实例，然后直接调用子组件的方法或访问子组件的属性。 3. EventBus：通过中央事件总线（EventBus）实现组件之间通信，即在Vue实例中创建一个空的Vue实例作为事件中心，然后在组件中通过$emit触发事件，$on监听事件。 4. Vuex：Vuex是Vue.js的状态管理库，可以用于管理全局状态，父组件和子组件都可以通过Vuex获取和修改状态。 5. Provide和Inject：父组件通过provide向子组件提供数据，子组件通过inject注入获取数据。这种方式适用于父子组件之间存在多层嵌套的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值