vue bus组件传值

最新推荐文章于 2023-04-25 10:13:31 发布

weixin_30672295

最新推荐文章于 2023-04-25 10:13:31 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/YmWu/p/10899589.html

博客提及父组件的 event 相关内容，还给出了转载链接https://www.cnblogs.com/YmWu/p/10899589.html 。

父组件

event(){

this.$bus.emit("edit", title, item);)}//edit为对应的子组件名称，title,item为向子组件传的值

子组件接收在mounted

this.$bus.on("edit", (title, obj) => {

//title，obj为子组件接收的值

});

子组件向父组件传值

this.$emit("refresh", addData, this.title); // addData ,title为向父组件传的值

父组件

<edit@refresh="getbmzzList"></edit>

事件

getbmzzList(data, title){

// data title为子组件传给父组件的值

}

转载于:https://www.cnblogs.com/YmWu/p/10899589.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30672295

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue2.0组件传值 bus

weixin_41141811的博客

08-18

357

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中间

【Vue】组件传值的六种方法

weixin_42213951的博客

03-19

2572

Vue 组件之间的通信大概归类为：父子组件通信: props/emit；ref/refs；emit；ref/refs；emit；ref/refs；attrs / listeners；listeners；listeners；parent / children兄弟组件通信:eventBus；vuex跨级通信:eventBus；Vuex；children 兄弟组件通信: eventBus；vuex 跨级通信: eventBus；Vuex；children兄弟组件通信:eventBus；vuex跨级通信:even

参与评论您还未登录，请先登录后发表或查看评论

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中组件间的传值 bus(vueBus公共交通)

sunshineTing2的博客

02-20

3010

第一步：创建 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

vue bus传值

weixin_46003800的博客

11-03

1050

简述 : 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 - 全局组件之间传值（Bus）

技术共享，共同进步！

08-04

965

全局组件之间传值（Bus）

vue.js 传值方法（父子组件传值、非父子组件传值）

01-08

**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...

vue 组件间的通信之子组件向父组件传值的方式

11-20

对于一些简单场景或非父子组件间的通信，不使用 Vuex 的话，可以创建一个全局的 Vue 实例作为事件总线（Event Bus）。 ```javascript // eventBus.js import Vue from 'vue' export const EventBus = new Vue() ```...

VUE兄弟组件传值操作实例分析

10-16

为了实现兄弟组件间的数据传递，Vue.js中引入了事件总线(Event Bus)的概念，通过中央事件管理机制来间接实现数据的传递。首先，我们来了解兄弟组件间传递数据的基本原理。在Vue.js中，兄弟组件无法直接通信，因为...

Vue 最常用不同组件传值

12-13

2. **兄弟组件传值**：兄弟组件间由于没有直接的父子关系，通常可以通过父组件作为中介来实现数据传递，或者借助Vue全局对象`$bus`进行事件的广播。 3. **跨级组件传值**：当需要跨越多级组件传递数据时，可以通过`...

vue兄弟组件 bus传值

DR1sxy的博客

08-21

425

vue兄弟组件 bus传值首先 main.js里边加上这些 const Bus = new Vue() new Vue({ data:{ Bus } }) 在需要传值的地方使用 this.root.Bus.root.Bus.root.Bus.emit(“name”, “我是兄弟组件”); 在接收的地方使用 this.root.Bus.root.Bus.root.Bus.on(“name”, r...

VUE使用Bus传值

xiaoHelloWord的博客

07-13

1013

首先建个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传值的理解

愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~

01-05

6086

说起bus你会想到什么？公交车？总线？在Vue中，对于任意两个组件之间的传值，就可以使用事件总线—bus。简单描述在任意两个组件传值中，可以创建一个bus类负责事件派发、监听和回调管理。使用方式在Vue项目中，我a.vue需要给b.vue传值，使用bus传值的方式如下： 1）建立bus.js文件在文件夹下建立bus.js文件，写入以下代码： // bus.js imp...

vue中使用 bus 进行组件之间传值

板砖工KO水泥匠

07-24

406

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 传值

CodingmanNAN的博客

04-25

336

创建一个bus类负责事件派发、监听和回调管理

vue传值之父子组件传值、bus传值、vuex传值、其他方式传值…

Jet_Lover的博客

05-31

8686

vue之组件传值的几种方式前言一、父子组件传值二、子组件通过emit来触发父组件的自定义事件三、兄弟之间通过bus总结前言 vue的组件传值分为三种方式：父传子、子传父、非父子组件传值引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，emit向上传递，兄弟之间用bus。一、父子组件传值子组件 <template> <div class="child"> {{ message }} </div> </templa

Vue组件间传值(bus)

weixin_45629209的博客

05-22

415

css样式 button { padding: 10px 20px; margin: 20px auto; border-radius: 5px; outline: none; } .red { background: pink; } .green { background: green; } js Vue.prototype.bus = new Vue();

vue的bus传值

fongwer的博客

03-12

894

记录一下------- 1.可以新建一个MyBus.js 2.在父组件中引入MyBus.js 监听totalNum 的值 import MyBus from './MyBus' created(){ this.$on('one',(num)=>{ this.totalNum += num; }) }, data(){ return{ ...

vue 祖父组件传值

最新发布

08-17

在 Vue 框架中，祖父组件向孙子组件传值可以通过多种方式实现，尤其在组件层级较深的情况下，直接使用 props 会增加中间层级组件的负担。以下几种方法可以有效地实现祖孙组件之间的传值： ### 使用 `provide` 和 `inject` 实现传值 Vue 提供了 `provide` 和 `inject` 机制，允许祖先组件向其任意层级的子组件传递数据，而无需通过中间组件显式传递。这种方式适用于跨层级共享数据的场景。 #### Vue 2 中的实现在 Vue 2 中，`provide` 和 `inject` 是非响应式的，除非手动处理响应式逻辑。祖组件通过 `provide` 提供数据，孙组件通过 `inject` 接收数据。 ```javascript // 祖组件 export default { data() { return { message: 'hello', obj: { message: 'hello' } }; }, provide() { return { obj: this.obj, message: () => this.message }; } }; ``` ```javascript // 孙组件 export default { inject: ['obj', 'message'], computed: { newMsg() { return this.message(); } } }; ``` 上述代码中，祖组件通过 `provide` 返回一个对象，包含 `obj` 和 `message`，其中 `message` 是一个返回 `this.message` 的函数，以实现响应式更新。孙组件通过 `inject` 接收这两个值，并在计算属性中使用 `message` 来缓存计算结果，提高性能[^2]。 #### Vue 3 中的实现在 Vue 3 中，`provide` 和 `inject` 支持响应式数据的传递。可以使用 `ref` 或 `reactive` 创建响应式数据，并通过 `provide` 提供，孙组件通过 `inject` 接收。 ```javascript // 祖组件 import { ref, provide } from 'vue'; export default { setup() { const name = ref('张三5555'); provide('name', name); return { name }; } }; ``` ```javascript // 孙组件 import { inject } from 'vue'; export default { setup() { const name = inject('name'); return { name }; } }; ``` 在 Vue 3 中，`provide` 可以直接提供响应式数据，孙组件通过 `inject` 接收后可以直接使用，而无需额外的响应式处理[^3]。 ### 使用事件总线（Event Bus）实现传值另一种方式是通过创建一个全局的事件总线，祖组件通过事件总线发送数据，孙组件通过监听事件接收数据。这种方式适用于组件之间无直接父子关系的场景。 ```javascript // 创建事件总线 import Vue from 'vue'; export const EventBus = new Vue(); ``` ```javascript // 祖组件 import { EventBus } from './event-bus'; export default { data() { return { message: 'hello' }; }, mounted() { EventBus.$emit('message', this.message); } }; ``` ```javascript // 孙组件 import { EventBus } from './event-bus'; export default { data() { return { receivedMessage: '' }; }, created() { EventBus.$on('message', (message) => { this.receivedMessage = message; }); } }; ``` 上述代码中，通过 `EventBus` 实现了祖组件向孙组件的数据传递。祖组件通过 `$emit` 发送数据，孙组件通过 `$on` 监听并接收数据。这种方式适用于组件之间无直接父子关系的场景，但需要注意事件的命名和管理，以避免命名冲突和事件泄漏[^1]。 ### 使用 Vuex 实现全局状态管理对于大型应用，推荐使用 Vuex 进行全局状态管理。通过 Vuex，可以将数据存储在全局的 store 中，任何组件都可以访问这些数据，而无需通过父子组件逐层传递。 ```javascript // 创建 Vuex store import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { message: 'hello' }, getters: { message: (state) => state.message }, actions: { updateMessage({ commit }, message) { commit('setMessage', message); } }, mutations: { setMessage(state, message) { state.message = message; } } }); ``` ```javascript // 祖组件 import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['updateMessage']) }, mounted() { this.updateMessage('hello'); } }; ``` ```javascript // 孙组件 import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['message']) } }; ``` 通过 Vuex，可以实现组件之间的数据共享，避免了组件之间逐层传递数据的问题。祖组件通过 `actions` 更新数据，孙组件通过 `getters` 获取数据。这种方式适用于大型应用，能够有效管理全局状态，提高代码的可维护性和可扩展性。