广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中bus的使用详解
  • 612
分享到

Vue中bus的使用详解

2024-04-02 19:04:59 612人浏览 八月长安
摘要

Vue总线机制(bus) vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。 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使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue中bus的使用详解

本文链接: https://www.lsjlt.com/news/122785.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue中bus的使用详解
    vue总线机制(bus) vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多...
    99+
    2022-11-12
  • Vue中使用和移除总线Bus的注意事项详解
    目录初始化并封装发送事件接收事件移除事件监听实际使用正确测试效果错误测试效果初始化并封装 在main.js中对bus进行初始化, Bus是一个不具备 DOM 的组件,它具有的仅仅只是...
    99+
    2023-05-18
    Vue使用总线Bus Vue移除总线Bus
  • SpringCloud Bus组件的使用配置详解
    目录什么是Bus搭建RabbitMQ服务实现自动配置刷新指定服务刷新配置集成webhook实现自动刷新什么是Bus 0.解释 https://spring.io/projects/s...
    99+
    2022-11-13
  • Vue中bus怎么用
    这篇文章主要介绍了Vue中bus怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vue总线机制(bus)vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,...
    99+
    2023-06-14
  • vue之bus总线简单使用讲解
    vue之bus总线的简单使用 场景描述: A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢? 当然方案是有的,用状态管理vuex可以...
    99+
    2022-11-12
  • Vue中$bus的用法及$on、$off的使用说明
    目录$bus的用法及$on、$off的使用vue实例事件总结($on,$once,$off,$emit)1.什么是实例事件2.使用场景3.与$on对应的还有一个$once ...
    99+
    2022-11-13
  • vue中axios的使用详解
    目录1、选择什么网络模块2、JSONP3、axios的请求方式4、axios框架的基本使用1、新建vue项目2、安装axios依赖3、编写代码4、请求结果5、axios发送并发请求方...
    99+
    2022-11-13
  • Vue中webpack的使用详解
    目录1、什么是Webpack2、模块化的演进AMDCMDES6模块3、安装Webpack4、使用webpack总结1、什么是Webpack 本质上, webpack是一个现代Java...
    99+
    2022-11-13
  • Vue中slot的使用详解
    目录使用 slot基础用法具名插槽作用域插槽slot 实现总结在Vue中,我们使用组件来组织页面和组织代码,类似于搭积木,每一个组件都是一个积木,使用一些相同或者不同组件就能搭建出我...
    99+
    2022-11-13
  • vue中的ElementUI的使用详解
    登录+sessionStorage 效果展示 登录成功后会把用户id存入前端的sessionStorage,拦截器会根据是否存在用户id来进行拦截 也可以将用户权限存入sessi...
    99+
    2022-11-12
  • Vue中 Vue.prototype使用详解
    目录1. 基本示例2. 为实例prototype设置作用域3. 注册和使用全局变量4. 原型方法的上下文5. 应用示例5.1 引入 axiosVue.prototype、Vue.co...
    99+
    2022-11-12
  • vue中 this.$set的使用详解
    目录vue中 this.$set的使用使用为什么能够响应式?分析总结vue中 this.$set的使用 背景:在我写前端项目的时候,后端给我们的一个json对象,并且我已经渲染在页面...
    99+
    2022-11-12
  • 详解Vue中keep-alive的使用
    目录前言1、概念:2、作用:3、使用方式:前言 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。例如:在开发中经常有从列表跳...
    99+
    2023-03-03
    Vue keep-alive使用 Vue keep-alive
  • JavaScript实现事件总线(Event Bus)的方法详解
    目录介绍原理分析进阶1. 如何在发送消息时传递参数2. 订阅后如何取消订阅3. 如何只订阅一次4. 如何清除某个事件或者所有事件5. TypeScript 版本6. 单例模式总结介绍...
    99+
    2022-11-13
  • vue中使用geobuf的示例详解
    需要安装geobuf和pbf这两个库 cnpm i -S geobuf pbf 引入 import geobuf from 'geobuf'; import Pbf from 'pb...
    99+
    2022-11-13
  • Vue中XMLHttpRequest的使用方法详解
    Vue中使用XMLHttpRequest(XHR)来获取数据的方式与传统的HTML页面相同。以下是Vue中XMLHttpRequest的详细使用方法: 1.创建XMLHttpRequ...
    99+
    2023-05-19
    Vue XMLHttpRequest使用方法 Vue XMLHttpRequest Vue XMLHttpRequest
  • Vue中使用Ueditor的示例详解
    目录一、下载Ueditor包 二、编译下载文件 三、在Vue项目中引用一、下载Ueditor包  官网地址:http://fex.baidu.com/u...
    99+
    2022-11-13
  • VUE中的mapState和mapActions的使用详解
    最近在开发一套系统,前端使用VUE开发,由于本人是后端开发,前端也会一点,但是VUE接触不多,在VUE项目开发遇到的一些坑记录一下,不是专业前端写好的不好,大家不要唝。。。 在VUE...
    99+
    2022-11-13
  • 详解vue项目中使用vuedraggable
    最近在学习一个可视化搭建的项目,里面用的拖拽就是draggable.js。看了几个中文的文档,有很多坑,可能是没有及时更新的原因。 VUe  建议去看vuedraggabl...
    99+
    2022-11-13
  • Vue中createElement使用实例详解
    目录一:参数说明二:使用示例三:源码解读Vue 提供了createElement 来创建虚拟dom,方便我们来函数化的方式来定义复杂的组件结构。在组件定义的时候,通常render函数...
    99+
    2022-11-13
    vue createElement使用 vue createElement
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作