Vue中bus的使用详解
更新时间：2021年04月02日 10:05:22 作者：bugSource
这篇文章主要介绍了Vue中bus的使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue总线机制(bus)
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。
bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。
vuex适用中大型项目、数据在多组件之间公用的情况。
组件通信bus的使用
在utils文件下下创建bus.js
// utils - bus.js import Vue from 'vue' const bus = new Vue() export default bus
一、传值
发送信息
import bus from '@/utils/bus'
第一个参数为标志变量，第二个参数为通信的值
us.$emit('message', 'hello');
接收信息
import bus from '@/utils/bus'
第一个参数为标志变量，第二个参数中的e为通信的值
bus.$on('message', (e) => {
console.log(e)
})
二、调用方法
一个组件(A)调用另一个组件(B)的方法
B组件的方法
import bus from '@/utils/bus'
mounted () {
bus.$on('testA', this.testA)
},
testA () {
console.log('由A组件调用')
}
A组件调用
import bus from '@/utils/bus'
mounted () {
bus.$emit('testA')
}
到此这篇关于Vue中bus的使用的文章就介绍到这了,更多相关vue bus使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在Vue应用中，有时我们需要实现文件预览和打印的功能，比如，我们可能需要预览并打印PDF文件、图片文件等，本文将介绍如何在Vue中实现文件预览和打印的功能，并提供相应的代码示例2023-06-06
这篇文章主要介绍了vue触发真实的点击事件跟用户行为一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
序号算是在展示数据的时候，一种很普遍的属性了，我们可以自己写生成序号的规则，也可以借助第三方，这篇文章主要介绍了Vue使用Element-UI生成并展示表头序号的方法,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了详解vue移动端项目代码拆分记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了关于axios在vue中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
组件化开发能大幅提高应用的开发效率、测试性、复用性等,下面这篇文章主要给大家介绍了关于通用vue组件化展示列表数据的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要为大家详细介绍了Vue.js组件通信之自定义事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了vue金额格式化保留两位小数的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
AT-UI 是一款基于 Vue.js 2.0 的轻量级、模块化前端 UI 组件库，主要用于快速开发 PC 网站产品。下面通过本文给大家介绍Vue 2.0的模块化前端 UI 组件库，需要的朋友参考下吧2017-12-12
动态绑定是我们日常开发中经常遇到的一个需求，下面这篇文章主要给大家介绍了关于vue动态绑定图标的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2021-05-05
最新评论