Vue的传值方式（一）—— 中央事件总线eventBus

最新推荐文章于 2024-05-28 07:03:48 发布
最新推荐文章于 2024-05-28 07:03:48 发布
阅读量404 收藏 1
点赞数 1
分类专栏： Vue开发应用 文章标签： vue 值传递
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42459638/article/details/118864110
版权

（1）在main.js文件创建一个Vue实例
eventBus
（2）传值组件引入eventBus之后使用emit自定义传值方法
传值组件
（3）在接收组件使用on触发方法且在回调中获取传过来的值
接收组件
注意：接收数据一般在mounted或created生命周期中，且eventBus若想重复使用，只需定义的方法命名不同即可

amawe
关注
专栏目录
Vue中事件总线的使用
weixin_45805570的博客
04-12 650
事件总线的概念 EventBus事件总线，通过事件总线，我们可以在任意两个组件之间传递数据。 使用事件总线的原因 对于父子组件，我们可以使用props从父向子传递数据，也可以使用**this.$emit(“方法名”,参数)**从子向父传递数据，这确实是非常方便好用了。但如果是非父子组件，我们就无法通过这种方式来传递数据了，事件总线就是用来处理这种情况的，实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。 事件总线的使用 1.首先我们要定义事件总线 //ma
html中js向vue组件传值,Vue 组件之间传值
weixin_26850469的博客
06-18 1122
#同一个路由下，父向子组件传值props属性 -- 单向绑定import childOne from '../components/childOne.vue';export default{data() {return{msg: '我是动态data中的数据！'}},components: {childOne}} {{ info }} {{ msg }} export default{props:...
vue -- 非父子组件传值，事件总线（eventbus）的使用方式
积少成多
11-30 6902
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 先说一下什么是事件总线，其实就是订阅发布者模式； 比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），我们通过on方法去监听某个事件，再用emit去触发这个事件，同时调用on中的回调函数，这样就完成了一次事件触发； 这是一种设计模式，和语言没有关系； 如果不太了...
vue 中使用 eventBus兄弟组件传数据
前端踩坑之路
07-17 579
vue 中使用 eventBus 场景：需要兄弟组件传数据 建立 eventBus import Vue from 'vue' export default new Vue() 在需要往外传值和接受值的兄弟组件中使用 eventBus import Bus from '@/utils/eventBus' 往外传值的组件 eventBus.$emit('getParams',data) 接收数据的组件处理 created(){ eventBus.$on('getParams'
使用vuex对兄弟组件传值_vue组件之间相互传值的方式
weixin_34828705的博客
02-05 1759
我们都知道 Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。...
vue[(事件车eventBus)中央事件总线数据传递]
墨水白云的博客
04-16 1339
本质 中央事件总线(通俗讲就是：eventBus事件车)的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。 作用 实现非父子组件之间的数据传递 使用方式 第一步：注册eventBus 最简单直接的方式就是在main.js中直接注册并且挂载一个空vue实例 如： main.js文件中如下： 注意要import Vue from...
antdesign vue 2.0 递归菜单_Vue前端开发——组件篇
weixin_39727402的博客
11-20 325
业务开发的过程中，经常会进行一些组件化的开发，组件常处理的一般有以下几种全局组件局部组件动态组件递归组件全局组件一般很多地方都会用到的一些功能我们一般封装成全局组件去使用，常规的建立一个全局组件的方法是，公共组件放到components 目录文件下使用Vue.component去注册组件，然后在main.js 中去导入这个公共文件夹// demoimport Vue from "vue";impo...
vue2的12种组件间通信方式，父传子，子传父，兄弟传值（超级硬核，宝藏）
m0_67392409的博客
03-06 454
玩之前创建一个 父组件 和 一个子组件 ，祝您玩的开心，整理了3多个小时，码字不易。 1、props传递数据 在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用props来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed // Parent.vue 传送 <template> ? <child :msg="msg"></chil.
灵活的Vue组件——原来这么简单
m0_67392273的博客
03-07 678
本篇学习目标 能够理解vue组件概念和作用 能够掌握封装组件能力 能够使用组件之间通信 能够完成todo案例 1. vue组件 1.0_为什么用组件 以前做过一个折叠面板 需求: 现在想要多个收起展开的部分 方案1: 复制代码 代码重复 冗余 不利于维护 案例用less写的样式, 所以下载 yarn add less less-loader@5.0.0 -D 模板标签 - 在这个基础上, 把要复用的多复制几份(讲解不好的地方引出解决方案) 案例：折叠面板
Vue组件传值EventBus
weixin_59324977的博客
01-07 1750
vue组件传值
Vue 传值方式——EventBus
weixin_54160772的博客
08-20 729
bus.$on('sendValue',(val) => { // 通过 bus.$on() 方法 接受 传递 过来数据 并进行赋值。 // 点击按钮 把Send 组件的数据 发送 appect 组件数据。import bus from '@/componets/eventBus.js' // 引入 bus 实例。import bus from ‘@/componets/eventBus.js’ // 导入 bus 实例。
vue组件传值（一）中央事件总线
weixin_45688725的博客
12-06 507
在使用Vue框架中，组件之间传值是我们经常使用到的一项技能。比如我们依赖的父组件正向传值给子组件，子组件逆向传值给父组件，兄弟组件之间传值，vuex等，这里我来总结一下中央事件总线的用法。 中央事件总线依赖于$emit实例本身触发事件。 下面就来看一下吧： 在src/assets/下创建一个xxx.js文件在其中只创建一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。 在publicBus.js中创建一个新的Vue实例： import Vue from "vue" expo
Vue组件传值—eventBus
weixin_46214344的博客
10-19 1915
Vue组件之间传值——eventBus前言一、eventBus简介二、eventBus使用三、清除事件eventBus四、例子结尾 前言 在vue中，组件之间传值是非常重要的，这关系到整个项目是否能正常运行，是否合乎逻辑，而在vue中，组件之间的传值方法有很多种,例如：prop、vuex、evenBus等。 因为我个人目前只理解了用evenBus进行传值，所以我就说一下我对于evenBus传值的理解。 一、eventBus简介 eventBus（事件总线），实质就是创建一个vue实例，通过一个空的vue实例
vue里面使用EventBus（事件总线）
qq_44552416的博客
09-25 1663
轻量级: Mitt只有200字节大小，不会增加你的应用程序的负担方便易用：只需要引入mitt并配置即可使用支持任何Javascript环境：Mitt支持在任何Javascript环境下使用，不仅限于Vue应用场景：组件通信。
vue事件中心（组件间的数据传递）
weixin_30493321的博客
01-19 243
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--<script src="https://unpkg.com/vue@2.1.10/dist/v...
Vue组件通讯中eventbus兄弟组件数据传递的例子
最新发布
codemami的博客
05-28 572
在这个例子中，当BrotherComponentA的按钮被点击时，它会触发一个名为data-transfer的自定义事件，并传递一个包含消息的对象。注意，在Vue 3中，官方推荐使用provide和inject或者mitt、vuex等库来处理组件间的通信，因为Event Bus可能会导致代码难以维护和理解。在Vue中，Event Bus（也称为事件总线）是一个常用于组件间通信的模式，特别是当组件之间没有直接的父子关系时。然后，在需要发送数据的组件中，你可以使用$emit方法触发一个自定义事件。
vue---组件传值--eventBus
m0_51165087的博客
03-16 531
eventBus—兄弟组件传值 两个组件页面a、b，属于兄弟关系，要求实现a向b传值，其传值实现过程如下： 首先在vue 项目中的 main.js 创建一个 vue实例， export const eventBus = new Vue() 其中在a页面使用 eventBus，代码如下： import { eventBus } from "../main"; eventBus.$emit("userName", this.username); 在 b 页面使用 eventBus，代码如下： eve
vue的eventBus 兄弟传值
fairyfree的博客
07-25 252
eventBus传值，简单方便
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值