$EventBus非父子组件传值

最新推荐文章于 2024-06-14 15:02:13 发布
最新推荐文章于 2024-06-14 15:02:13 发布
阅读量99 收藏
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41943654/article/details/120199815
版权

$EventBus非父子组件传值

  1. 在一个组件创建时进行事件监听
//在组件一中我们可以在created中进行监听
created(){  this.$eventBus.$on( " 事件名 1" , "事件处理函数1"    )    }
  1. 触发eventBus
//在组件二中我们就可以在任意地方进行触发
   this.$eventBus.$emit(  "  事件名1 "  ,    "  需要传递的参数1  "  )
学前端的皮卡丘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue事件总线EventBus(兄弟组件之间的传值)
qq_53061847的博客
09-13 2214
EventBus又称为事件总线，相当于一个全局的仓库，任何组件都可以在这个仓库里面获取事件。
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
vue之$eventBus非父子组件传值使用解析
qq_41318044的博客
09-30 377
在vue中,我们可以使用props和$emit进行父子组件的传值,但是如果需要互相传值的组件不是父子关系,这时我们使用props进行传值就会非常麻烦, 这个时候我们就可以用到$eventBus 声明eventBus 我们在js入口文件中给vue原型声明一个$eventBus,他的值是一个不带dom组件的vue实例 Vue.prototype.$evnetBus = new Vue(); 这样我们在一个组件创建时候进行一个事件监听 //在组件一中我们可以.
eventBus组件通信（vue非父子组件间的传值）
qq_27470647的博客
04-01 444
今天在用eventBus实现任意两个组件间的通信时，踩了一个坑，需求很简单，就是把左侧组件A输入的对象值this.ruleForm在点击提交按钮之后，把提交的对象插入到右侧组件B的表格数据tableData中，每提交一次就插一条数据。但是一开始按照我的理解写出来的代码运行之后出现了一个很奇怪的现象，每次点击提交按钮，后面提交的数据都会改变之前已经提交的数据，比如说第一次提交了数据a1，表格新增了一...
非父子组件通信-$on和$emit
前端小菜
07-04 3127
非父子组件通信：通过 event bus ，在一个组件创建时的钩子函数中监听 某个事件，而在需要与其进行通信的组件中触发这个函数，同时交换数据 HTML： JS： （1）创建一个中转站，空的vue实例 var eventBus = new Vue({}); （2）//创建一个组件foo：去监听bar组件触发的函数，同时自己去触发bar组件的事件 var foo = {
Vue 用 event bus 解决非父子组件的数据传递
weixin_34331102的博客
08-16 106
开始 在不使用vuex的情况下，实现非父子组件的数据传递。 当然你项目中使用着vuex就不必要再用event bus了。 使用方法 我们需要有一个 Vue 实例来充当通信媒介的作用 创建一个 src/bus.js import Vue from 'vue' export default new Vue() 在组件A中使用 $on(eventName...
Vue组件通信中非父子组件传值知识点总结
12-13
如果想要了解非父子关系的组件传值，最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路。 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式。 这是我总结的...
Android实现EventBus登录界面与传值（粘性事件）
08-28
主要为大家详细介绍了Android实现EventBus登录界面与传值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解vue 组件之间使用eventbus传值
01-21
对于前端的我们而言，并非是只有写界面才是最大的问题，很多的...，（我们也不讨论已经废除的vm.$dispatch）很多情况下我们都是需要一个事件的捕获，这时候我们就可以用到vue的eventbus了 受用eventbus的方法很是简单
vue中的event bus非父子组件通信解析
08-29
本篇文章主要介绍了 vue中的event bus非父子组件通信解析 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue -- 非父子组件传值，事件总线（eventbus）的使用方式
积少成多
11-30 6881
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 先说一下什么是事件总线，其实就是订阅发布者模式； 比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），我们通过on方法去监听某个事件，再用emit去触发这个事件，同时调用on中的回调函数，这样就完成了一次事件触发； 这是一种设计模式，和语言没有关系； 如果不太了...
vue 兄弟组件间传值 EventBus
qq_44146522的博客
04-22 2971
大家或许都听说EventBus,或者说或多或少都了解过，他可以在任何两个组件中进行传值，不局限于父子、祖孙或是兄弟组件，也可以说他是一种发布——订阅的设计模式。 我将使用拆分为五个步骤：创建、引入、监听、递交、销毁 1、创建 // 创建一个EventBus.js文件 // 引入 import Vue from 'vue' // 创建实例 vueconst EventBus = new Vue() // 导出 export default EventBus 2、引入 有两种方法 ...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 580
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1448
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1303
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 545
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1283
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 841
Vue在表单校验中trigger属性指定何时触发校验规则
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 291
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
this.$eventBus.$emit
03-16
this.$eventBus.$emit是Vue.js中的一种事件机制，用于在组件之间进行通信。通过该方法，一个组件可以向其他组件发送自定义事件，并传递数据。 具体来说，this.$eventBus是一个Vue实例，它可以作为一个中央事件总线，用于在不同的组件之间传递消息。$emit方法用于触发一个自定义事件，并将数据作为参数传递给订阅该事件的组件。 使用this.$eventBus.$emit的步骤如下： 1. 在Vue实例中创建一个事件总线：在main.js或者根组件中，可以通过Vue.prototype.$eventBus = new Vue()来创建一个全局的事件总线。 2. 在发送事件的组件中使用this.$eventBus.$emit(eventName, data)来触发事件。eventName是事件名称，data是要传递的数据。 3. 在接收事件的组件中使用this.$eventBus.$on(eventName, callback)来监听事件。eventName是要监听的事件名称，callback是事件触发时执行的回调函数。 注意事项： - 使用this.$eventBus.$emit发送事件时，需要保证接收事件的组件已经被创建并且监听了相应的事件。 - 在不需要时，应该及时销毁事件总线，避免内存泄漏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值