vue Bus 学习

最新推荐文章于 2021-09-07 17:59:04 发布

转载最新推荐文章于 2021-09-07 17:59:04 发布 · 146 阅读

VUE 专栏收录该内容

7 篇文章

订阅专栏

博客指出在Vue中，非父子关系的两个组件有时需要通信。Vue2.0提供了Vuex，而在简单场景下，可使用一个空的Vue实例作为中央事件总线来实现通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

转载链接：http://www.cnblogs.com/fanlinqiang/p/7756566.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

红烧金鱼草

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 从入门到精通全栈学习路径

monk all the way

03-28

362

/ 自定义指令el.focus()},el.focus()})// 自定义插件// 注入全局方法// 添加全局指令})dict: { hello: '你好' }})render() {return h('div',},},methods: {console.log('点击了警告框')

Vue组件通信之Bus的具体使用

08-28

本篇文章主要介绍了Vue组件通信之Bus的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

vue中bus的使用

我们一起学前端

07-25

3655

一、新建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的详细使用

热门推荐

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

401

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。参考：http://blog.youkuaiyun.com/u013034014/article/details/54574989?locationNum=2&fps=1 例子：https://segmentfault.com/q/1010000007491994...

vue Bus的使用

qq_37899792的博客

03-19

4861

场景：有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。 Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 组件调用时先引入组件1 import Bus from './Bus' expor...

vue基本内容总结学习

07-01

### Vue.js 基本内容总结学习 #### 一、组件之间的通信 ##### 1.1 父子组件之间的通信在 Vue.js 中，父子组件间的通信是最常见的模式之一。这种通信通常遵循单向数据流的原则，即数据从父组件流向子组件。 **父...

vue学习笔记学习笔记

05-07

这篇学习笔记主要涵盖了Vue的核心概念，包括组件通信、非父子组件间通信以及路由管理和状态管理。 ### 父子组件通信 #### 1) Props和`$emit` **Props** 是Vue中父组件向子组件传递数据的主要方式。在父组件中定义...

write-vue3-from-scratch:学习vue学习vue写vue学习vue

05-14

3. **Event Bus**: 虽然Vue 3提倡使用`provide/inject`或`Vuex`进行父子组件通信，但仍然可以通过Event Bus实现非父子组件间的通信。六、状态管理 1. **Vuex**: Vuex是Vue的状态管理库，适用于大型应用。Vue 3 ...

vue组件学习教程

08-29

"Vue 组件学习教程" Vue 组件是 Vue 框架中的一种基本单元，用于构建复杂的用户界面。学习 Vue 组件是掌握 Vue 框架的关键所在，本文将详细介绍 Vue 组件的学习教程，根据 Vue 官方文档学习的笔记，具有相当的参考...

VMware安装虚拟机Ubuntu提示piix4_smbus:Host SMBus错误解决办法

fanqiantao的博客

11-09

1688

在VMware-Workstation下安装ubuntu时开机老是提示piix4_smbus 0000:00:007.3: Host SMBus controller not enabled，虽然说不会影响系统的正常运行，但是很影响开机速度，每次开机都会在那个地方等很久，无奈，找个办法解决掉。错误： ubuntu开机出现错误提示：piix4_smbus 0000:00:0...

vue中bus的使用笔记

qq_41630382的博客

11-15

9070

首先创建一个bus.js，然后在所需要的组件中引入该组件引入完成后可以根据组件之间通信的方法进行数据传递 bus.$emit()是传递参数 bus.$on()是接收传递的参数这里$emit("collapse"),与$on("collapse")中的collapse（备注：也可以是别的名称）是bus传递约定好的一种通信记号，但两个必须保持一致；...

vue中总线机制(bus)

海阔天空

12-07

8074

vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目，对于中大型项目数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。 vuex适用中大型项目、数据在多组件之间公用的情况。 ...

vue-cli 使用vue-bus来全局控制

胡世林的博客

07-31

5261

觉得vuex泰国繁琐？试试简单好用的vue-bus

vue -- vue-i18n国际化使用简单教程

积少成多

12-20

1万+

欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 vue-i18n是一个针对于vue的国际化插件，使用非常简单，具体使用方式看我细细道来。实现方式这里我们直接讲在实际开发中如何使用以及注意事项； 1. 下载包 npm install vue-i18n 2. 配置在main.js文件中加入如下配置 // 引入插件和语言包 import VueI18n from '...

基于C#分步式聊天系统的在线视频直播系统之 FY.Logfiles（日志文件组件）

冯毅

04-02

4410

文件日志组件，组件分调试、普通、警告、系统、异常5个等级，根据配置等级将日志写入文件。

Vue事件总线（EventBus）使用详细介绍

i168wintop的博客

07-08

2万+

Vue事件总线（EventBus）使用详细介绍前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue...

vue-typescript-bus

知行合一

07-06

754

vue-typescript-bus为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。（传参数的时候可以通过路由的params或者query去传参数，或者大型数据可以用vuex来处理，但是有些人还是喜欢用vue-typescript-bus中央事件来处理）安装 npm i -S vue-m-ts-bus 使用方法，在main.ts里面 #main.ts import Vue from 'vue';

Linux 内核 NuBus 总线

weixin_30258027的博客

07-07

224

另一个有趣的, 但是几乎被忘记的, 接口总线是 NuBus. 它被发现于老的 Mac 计算机(那些有 M68K CPU 家族的). 所有的这个总线是内存映射的(象 M68K 的所有东西), 并且设备只被地理式寻址. 这对 Apple 是好的和典型的, 因为更老的 Apple II 已经有一个类似的总线布局. 不好的是几乎不可能找到 NuBus 的文档, 因为 Apple 对于它的 Ma...

vue3学习小满

最新发布

07-08

### Vue 3 学习教程概述 Vue 3 是一个现代的 JavaScript 框架，它在性能、灵活性和可维护性方面进行了显著改进。对于想要学习 Vue 3 的开发者来说，以下是一些关键的学习资源和建议： 1. **官方文档**：Vue 官方文档是学习 Vue 3 的最佳起点。文档详细介绍了框架的核心概念、API 以及最佳实践。 2. **小满老师的课程**：跟随小满老师学习 Vue 3 是一个不错的选择。他的课程涵盖了 Vue 3 的基础知识，包括 Pinia 和 TypeScript 的使用[^2]。 3. **Vite 构建工具**：Vue 3 推荐使用 Vite 作为构建工具。Vite 提供了更快的开发服务器启动时间和更高效的热更新。可以通过 `npm init vite@latest` 命令快速创建一个 Vue 3 项目。 4. **Composition API**：Vue 3 引入了 Composition API，这是一种新的方式来组织和重用逻辑代码。通过 `setup()` 函数和 `script setup` 语法，开发者可以更灵活地管理组件逻辑。 5. **Pinia 状态管理**：Vue 3 推荐使用 Pinia 作为状态管理工具，取代了 Vue 2 中的 Vuex。Pinia 提供了更简洁的 API 和更好的 TypeScript 支持[^3]。 6. **Teleport 和 Suspense**：Vue 3 新增了两个内置组件 `Teleport` 和 `Suspense`，分别用于处理跨层级的 DOM 操作和异步依赖的组件渲染。 7. **多 v-model 支持**：Vue 3 支持多个 `v-model` 绑定，使得组件之间的双向数据绑定更加灵活。 8. **事件总线替代方案**：Vue 3 移除了事件总线，推荐使用 `mitt` 或其他第三方库来实现全局事件通信[^1]。 9. **组件通信**：Vue 3 改进了组件通信的方式，将 `.sync` 修饰符优化到 `v-model` 中，并将 `$listeners` 合并到 `$attrs` 中。 ### 示例代码以下是一个简单的 Vue 3 组件示例，展示了如何使用 `setup()` 函数和 `script setup` 语法： ```vue <template> <div> <h1>我是B组件</h1> </div> </template> <script setup lang="ts"> import { getCurrentInstance } from 'vue' const instance = getCurrentInstance() instance?.proxy?.$Bus.on('on-num', (num) => { console.log(num, '===========>B') }) </script> <style> </style> ``` ### 相关问题 1. 如何在 Vue 3 中使用 Pinia 进行状态管理？ 2. Vue 3 中的 Composition API 与 Vue 2 的 Options API 有什么区别？ 3. 如何在 Vue 3 中实现组件之间的通信？ 4. Vue 3 的 Teleport 和 Suspense 组件有哪些实际应用场景？ 5. 如何在 Vue 3 中使用 Vite 构建项目？