Vue Bus 传值

最新推荐文章于 2023-08-02 11:03:35 发布
原创 最新推荐文章于 2023-08-02 11:03:35 发布 · 356 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

文章介绍了如何通过创建eventBus.js文件，定义一个bus实例来实现Vue应用中任意两个组件之间的通信。在main.js中引入bus，并在组件内使用$bus的方法如$emit、$on和$off进行事件监听和触发，达到传值目的。在组件生命周期钩子中绑定和解绑事件，确保资源的正确管理。

任意两个组件传值可以Vuex，也可使用bus类
bus类：任意两个组件传值，可创建一个bus类负责事件派发、监听和回调管理

建立eventBus.js

src/assets/js/eventBus.js

const install = (Vue) => {
	const Bus = new Vue({
		methods: {
			on (event, ...args) {
				this.$on(event, ...args);
			},
			emit (event, callback) {
				this.$emit(event, callback);
			},
			off (event, callback) {
				this.$off(event, callback);
			}
		}
	})
	Vue.prototype.$bus = Bus;
}
export default install;

在main.js中引入eventBus

src/main.js

import Vue from 'vue'
import Bus from "@/assets/js/eventBus";
Vue.use(Bus);

组件中使用

src/xxx/xxx/xxx.vue

  mounted() {
  	this.$bus.emit("sendFn", "传值到其它组件");
    this.$bus.on("getFn", v=>"收到其它组件传值");
  },
  destroyed() {
    this.$bus.off("getFn");
  },
vue中组件间 的传值 bus(vueBus公共交通)
sunshineTing2的博客
02-20 3041
第一步：创建 vueBus.js文件（在utils目录下） // vueBus.js import Bus from 'vue'; let install = function (Vue) { Vue.prototype.$bus = new Bus() } export default { install }; 第二步：在main.js中引入vueBus // main.js import vueBus from '@/utils/vueBus'; Vue.use(vueBus); 第三步：在.v
vue2传值方式总结 （十二种方法）
热门推荐
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
04-23 2万+
一.父传子传递 （1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量 ​ （2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性 名”] props:{属性名:数据类型} 代码示例： //父组件 父组件 //子组件 {{data}} 二.子传父传递 （1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法 ​ （2）在子组件的方法中通过 this.$emit(“事件”)来
Vue组件传值之bus总线
01-08
引言 在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，将bus(空Vue)定义成单独的文件Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 方法一： 在组件一中引入 import Bus from './Bus' export default { data() { return { ......
详解vue 组件之间使用eventbus传值
08-29
本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE使用Bus传值
xiaoHelloWord的博客
07-13 1024
首先建个bus.js文件 JS文件内容如下 import Vue from 'vue' export default new Vue() 然后在我们要传值的页面中引入，对应自己放的位置 import BUS from ‘…/utils/bus.js’ NavChild为传值的名字 BUS.$emit('NavChild',数据内容) 在我们接收的页面在继续引入bus.js import BUS from ‘…/utils/bus.js’ infor就是我们传过来的值 Bus.$on('NavChild'
vue bus传值
weixin_46003800的博客
11-03 1057
简述 : bus传值是两个组件之间的传值,适用兄弟组件之间的传值 1.utils中创建bus.js文件 import Vue from 'vue' const Bus = new Vue() export default Bus 2.在需要传值的组件中添加代码 A.vue页面 // 兄弟组件中的传值 import Bus from './utils/bus..js' // 在适当的时机通过this.$emit进行传参 methods:{ toBPage(){ Bus.$emit('val',data
vue组件传值的实现方式小结【三种方式】
10-15
- Event Bus：创建一个全局事件中心，通过发布和订阅事件来传递数据。这通常是在不引入Vuex的情况下，组件间通信的一种简单方案。 - 使用Vuex-PersistedState插件：如果需要在页面刷新后保持状态，可以结合Vuex和该...
浅谈vue中$bus的使用和涉及到的问题
01-19
使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到（每一个领域都是会有坑的呀）。 1：创建$bus文件 创建一个文件内容如下： import Vue from ‘vue’ export default new Vue(); 2...
Vue - 全局组件之间传值（Bus）
技术共享，共同进步！
08-04 978
全局组件之间传值（Bus）
Vue中bus传值（傻瓜式）
T8682828的博客
10-14 220
Vue中bus传值（傻瓜式）
vue传值之父子组件传值、bus传值、vuex传值、其他方式传值…
Jet_Lover的博客
05-31 8784
vue之组件传值的几种方式前言一、父子组件传值二、子组件通过emit来触发父组件的自定义事件三、兄弟之间通过bus总结 前言 vue的组件传值分为三种方式：父传子、子传父、非父子组件传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，emit向上传递，兄弟之间用bus。 一、父子组件传值 子组件 <template> <div class="child"> {{ message }} </div> </templa
Vue中bus传值的理解
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
01-05 6105
  说起bus你会想到什么？公交车？总线？在Vue中，对于任意两个组件之间的传值，就可以使用事件总线—bus。 简单描述   在任意两个组件传值中，可以创建一个bus类负责事件派发、监听和回调管理。 使用方式   在Vue项目中，我a.vue需要给b.vue传值，使用bus传值的方式如下：   1）建立bus.js文件   在文件夹下建立bus.js文件，写入以下代码： // bus.js imp...
vue中使用 bus 进行组件之间传值
板砖工KO水泥匠
07-24 419
vue中使用 bus 进行组件之间传值 step 1 、npm安装 npm install vue-bus step 2、引入 // 在 main.js 引入 import VueBus from 'vue-bus'; Vue.use(VueBus); step 3、使用 组件A中 // 传值 this.$bus.emit("eduTest",{title:"hello world"}) 组件B中 // 监测传值 this.$bus.on("eduTest",res=>{ console
vue组件之间的传值方式之一$bus
weixin_45379180的博客
05-29 652
vue中使用 事件车$bus npm install vue-bus --save main.js文件夾中引用 import VueBus from ‘vue-bus’; Vue.use(VueBus); 1. this.$bus.emit('changeY',1) 2. this.$bus.on('changeY',(data)=>{ //传值之后的事件处理 }) 3.this.$bus.off('changeY',1) 以上 emit ，传值 on 接收传值 进行事件处理 off 关
vue bus组件传值
weixin_30672295的博客
05-21 260
父组件 event(){ this.$bus.emit("edit", title, item);)}//edit为对应的子组件名称，title,item为向子组件传的值 子组件 接收 在mounted this.$bus.on("edit", (title, obj) => { //title，obj为子组件接收的值 }); 子组件向父组件传值 this.$...
vue bus总线传值
u010234868的专栏
08-02 241
【代码】vue bus总线传值。
vue组件传值之bus（多用于兄弟组件传值）
bamboozjy的博客
05-30 3047
1.在main.js中，new一个空的vue挂在到vue原型上： Vue.prototype.$bus = new Vue(); 2.在demo.vue中使用bus发送数据（可以通过点击事件触发） this.$bus.$emit("sendData",{data:"需要发送的数据"}) 3.在另一个test.vue中接收数据（可以写在created生命周期函数中） this.$bu...
vue使用bus兄弟组件中的传值
真真的博客
07-27 199
新建bus.js import Vue from 'vue'; // 使用 Event Bus const bus = new Vue(); export default bus; main.js中引入bus.js import bus from '../../utils/bus' Vue.prototype.$bus=bus; a.vue页面使用 this.$bus.$emit('updateOrders')//触发 b.vue页面使用 this.$bus.$on('updateOrder
vue如何传值
最新发布
08-31
Vue 传值方法多样，以下是一些常用的传值方法： ### 全局事件总线传值 在全局配置中挂载全局事件总线 `$bus`： ```javascript new Vue({ render: h => h(App), beforeCreate() { // 挂载全局事件总线 $bus Vue.prototype.$bus = this; }, }).$mount('#app'); ``` 通过新定义一个 Vue 实例传值，可创建 `bus.js` 文件作为中转站用于兄弟间传值等 [^1][^2]。 ### 页面间参数传递（eventBus） 在小项目、页面量较少的情况下使用，可在全局定义一个 `eventBus`： ```javascript window.eventBus = new Vue(); ``` 在需要传递参数的组件中，使用 `$emit` 发送值： ```javascript eventBus.$emit('eventBusName', id); ``` 在需要接受参数的组件中，使用 `$on` 接受值，并在 `beforeDestroy()` 中关闭 `eventBus`： ```javascript eventBus.$on('eventBusName', function(val) { console.log(val) }) // 在 beforeDestroy 中关闭 beforeDestroy() { eventBus.$off('eventBusName'); } ``` [^3] ### Vuex 传值 使用 Vuex 进行传值，示例代码如下： ```javascript import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './actions' import getters from './getters' Vue.use(Vuex) const state = { order: { } } export default new Vuex.Store({ state, mutations, actions, getters }) ``` [^4] ### 父组件向子组件传值 父组件代码示例： ```vue <template> <ChildComponent :propName="value" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { value: 'some value' } }, components: { ChildComponent } }; </script> ``` 子组件接收： ```vue <template> <div>{{ propName }}</div> </template> <script> export default { props: ['propName'] }; </script> ``` ### 子组件向父组件传值 父组件代码： ```vue <template> <ChildComponent @childEvent="handleChildEmit" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { methods: { handleChildEmit(value) { console.log('接收到子组件的数据:', value); // 更新父组件状态等操作 } }, components: { ChildComponent } }; </script> ``` 子组件触发事件： ```vue <template> <button @click="sendData">发送数据</button> </template> <script> export default { methods: { sendData() { this.$emit('childEvent', 'data from child'); } } }; </script> ``` [^5] ### `$refs` 和直接调用方法传值 父组件通过 `$refs` 调用子组件的方法获取数据： ```vue <template> <ChildComponent ref="childRef" /> <button @click="getDataFromChild">获取子组件数据</button> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { methods: { getDataFromChild() { const data = this.$refs.childRef.getData(); console.log('子组件数据:', data); } }, components: { ChildComponent } }; </script> ``` 子组件定义方法： ```vue <template> <div></div> </template> <script> export default { methods: { getData() { return 'data from child'; } } }; </script> ``` [^5]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值