vue项目使用Bus进行组件通信

最新推荐文章于 2022-11-15 10:16:49 发布
最新推荐文章于 2022-11-15 10:16:49 发布
阅读量168 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41329126/article/details/114694609
版权
本文详细介绍了在Vue项目中如何通过创建bus.js文件，并在main.js中引入，来实现在不同组件间传递和接收值的操作，从而实现组件间的通信。文章分为五个步骤，包括bus.js的创建、main.js的配置、组件引用、值的传递以及接收值后的具体处理。
摘要由CSDN通过智能技术生成

1.bus.js

src文件夹下新建bus文件夹，新建bus.js文件，内容如下

import Vue from 'vue'
export default new Vue()

2.main.js

const Bus = new Vue()

new Vue(
最低0.47元/天 解锁文章
陌纳威
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 使用 Event Bus
lio-zero 的博客
06-25 3094
本文已整理到 Github，地址 ???? blog。 如果我的内容帮助到了您，欢迎点个 Star ???????????? 鼓励鼓励 :) ~~ 我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。 在 Vue2 中，创建 Event Bus 如下： export const bus = new Vue() bus.$on(...) bus.$emit(...) 在 Vue...
使用bus实现Vue组件间通信
Tayshin的博客
07-05 1051
Vue组件间通信实现方法很多，主要有： 1.使用Vuex实现项目的状态管理（官方推荐） 2.props实现数据传递（父子组件，详细可查Vue官方文档） 3.网上很多博客提到的$dispatch ,$broadcast 方法，不过在Vue2.0中已经废弃 4.使用中转站（bus）的方法，可以方便的组件间通信 主要记录下第四种方法： 主要思路是设置一个额外的Vue对象作为中转站。 在组件
vue使用bus总线之非父子组件间的通信
张凯杰的博客
02-21 656
笔记---三：bus总线非父子组件间的通讯
vue 非父子组件通讯之bus总线通讯
djh052900的博客
11-15 702
vue 非父子组件通讯之bus总线通讯
Vue使用vue-bus进行组件间通信
这就是快乐嘛
04-23 356
首先在main.js中将vue-bus注册 import VueBus from 'vue-bus' Vue.use(VueBus) 如果提示没有vue-bus，则执行安装命令： npm install vue-bus --save 监听事件： 通过this.$bus.on('自定义事件名称',事件函数) 举例 mounted: function () { this.$bus.on('自...
Vue创建三：组件间bus传值
weixin_34255793的博客
06-25 111
业务中遇到一个复杂的表单页，分割成细小的组件 当InputItem.vue输入框值改变时，需要更改Form.vue中formVal对象的值，此处使用了bus，当组件3中的值发生变化时，bus提交changedFormObject事件，然后在组件1中处理事件，以此来实现组件间的传值。 1、创建Bus.js import Vue from 'vue' const Bus...
Vue组件通信之Bus的具体使用
08-28
Vue组件通信之Bus的具体使用 在Vue组件通信中，Bus扮演着非常重要的角色。Bus是一种集中式的事件中间件，它允许组件自由交流，无论组件处于组件树的哪一层。在Vue 2.0中，$dispatch和$broadcast已经被弃用，官方...
Vue2单一事件管理组件通信
08-30
这种方式利用Vue的非父子组件通信手段，即Event Bus（事件总线）。 首先，创建一个全局的Vue实例，作为事件的中介者： ```javascript var Event = new Vue(); ``` 这个`Event`实例就像一个中央事件仓库，允许任何...
vue2与vue3的使用区别与组件通信
最新发布
09-12
本篇文章将深入探讨Vue2和Vue3在使用上的主要区别以及组件通信的方法。 ### Vue2与Vue3的区别 #### 1. Composition API Vue2 使用的是 Options API，所有组件选项如 data、methods、computed 等都直接在组件选项...
vue子父组件通信的实现代码
08-30
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在Vue中，子组件与父组件之间的通信是常见的...在实际开发中，根据项目的复杂程度选择合适的方法进行组件通信是非常重要的。如果有任何疑问，欢迎继续提问。
vue中bus的详细使用
weixin_44020340的博客
09-07 2万+
vue中关于兄弟组件bus的使用方法 首先，bus只能用在兄弟组件之间的传值，其它关系的传值不用bus。 废话不多说，请看下面代码解说 首先，先创建bus.js文件，然后在引用，这里有两种引用方法：局部引用和全局引用。 // bus.js文件内容 import Vue from 'vue' // export default new Vue() const Bus = new Vue() export default Bus 局部引用：是在兄弟组件的文件里面引用bus.js文件 全局引用：是在main.
vue Bus总线
Cool的博客
04-25 358
有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 参考：http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1 例子：https://segmentfault.com/q/1010000007491994...
Vue状态管理Bus的使用
weixin_30825581的博客
01-23 98
BUS总线 在开发过程中我们经常会遇到两个兄弟组件之间的需要通信的情况，虽然Vue2.X提供了Vuex状态管理模式，但是在简单的应用中，使用Vuex就十分的冗余了，所以使用BUS作为中央事件总线，来实现兄弟件之间的传值。 方法一： 将Bus.js单独抽离出来，Bus.js文件如下： import Vue from 'vue' const Bus = new Vue() export d...
vue bus的使用
Guanerye0314的博客
09-27 678
vue Bus 总线传递 数据
封装一个中央总线bus文件 在vue脚手架中使用
业余前端的职业经历
12-17 564
1.了解vue的童鞋可能知道 在非父子组件之间的通信 我们需要 一个空的vue实例 var bus =new Vue() 如果 我们想在脚手架中想使用 毕竟在实际的项目中 要想实现 兄弟组件之间的通信呢 这个时候可能有人会说可以用 vuex 数据状态管理器 咱这里先不说 刷新之后 数值回初始值的问题 vuex适合在稍大的项目中使用 并不是我们所要的项目都需要 vuex状态管理 可能有一种...
vue中bus的使用
我们一起学前端
07-25 3587
一、新建bus.js import Vue from 'vue' export const bus = new Vue() 二、引用bus.js，发送消息 import {bus} from './bus' bus.$emit('test', 11) 三、引入bus.js,接受消息 import {bus} from './bus' bus.$on('test', function (msg)...
Vue组件之间数据通信之 Bus事件总线
AdleyTales的技术博客
12-03 5434
利用new 一个新的vue实例，可以轻松实现组件之间数据通信。 方法1 新创建一个Bus的js模块 // Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus // 组件Com1 import Bus from './Bus' export default { data() { ...
vue中使用bus通信传参
weixin_43549976的博客
07-15 1604
vue中使用$bus通信 新建bus.js文件 import Vue from 'vue'; // 总线，一些组件间简单的数据交流通过它来进行，比如侧边栏折叠。过于复杂的数据推荐使用Vuex const bus = new Vue(); export default bus; demo1.vue 传值 //引入bus.js文件 import Bus from "@/views/common/bus.js"; methods:{ // 传值 handle(){ Bus.$emi
vue 组件之间使用eventbus传值
热门推荐
胡世林的博客
07-15 4万+
eventbus vue vue-cli 组件传值
vue子组件和子组件通信
09-08
总而言之，Vue中的子组件和父组件通信可以通过props和$emit、$refs等方式来实现。选用哪种方式取决于具体的需求和场景。 ### 回答3： Vue子组件和父组件通信可以通过props和$emit实现。 props是父组件向子组件传递...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值