vue中事件总线bus的用法
./util/Bus.js
import Bus from 'vue';
let install = function (Vue) {
// 设置eventBus
Vue.prototype.bus = new Bus();
} export default { install };- 安装:
npm install vue-bus 在main.js 中引入vuebus:- 1234
importVue from'vue';importVueBus from'vue-bus';Vue.use(VueBus);在组件中使用
触发事件:
this.$bus.emit("事件名",值)应对事件:mounted:function(){this.$bus.on("事件名",function(值){});},destroyed:function(){this.$bus.off("事件名");}this.$bus.emit ==> 触发this.$bus.on ==> 接収this.$bus.off ==> 清除注意:接收后要清除事件,不然会造成不必要的后果!!!
vue中事件总线bus的用法的更多相关文章
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue笔记 - 组件间通信 之 中央事件总线bus
中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...
- Vue.js 2.x中事件总线(EvevntBus)及element-ui中全屏loading的使用
事件总线(Event Bus)可以在vue项目的index.js文件中创建,也可以在一个独立的.vue文件中创建.使用时,在各个子组件中引入该组件即可. 项目中的全屏loading较多时,可以在根组件 ...
- vue中央事件总线eventBus的简单理解和使用
公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...
- 025——VUE中事件的基本使用与VUE中差异
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中mixin的理解与用法
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
- vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中is的作用和用法
回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...
随机推荐
- Ubuntu22.04下安装chrome浏览器
Ubuntu下Chrome的下载: 地址: https://www.google.cn/intl/zh-CN/chrome/ 下载后的文件: 安装: 命令: sudo dpkg -i google-c ...
- CF1051F题解
The Shortest Statement 算法:树链剖分,最小生成树,最短路. 先讲一下题意:有一个 \(n\) 点 \(m\) 边的无向连通图,\(q\) 次询问,每次询问 \(a\) 到 \( ...
- ABC304Ex Constrained Topological Sort 题解
https://atcoder.jp/contests/abc304/tasks/abc304_h [CSP-S 2023] 种树后半部分的加强版 对于边 \((u,v)\),不妨令 $r[u]$ 对 ...
- 推荐7款美观且功能强大的WPF UI库
前言 经常看到有小伙伴在DotNetGuide技术社区交流群里提问:WPF有什么好用或者好看的UI组件库推荐的?,今天大姚给大家分享7款开源.美观.功能强大.简单易用的WPF UI组件库. WPF介绍 ...
- .NET 开源实时监控系统 - WatchDog
前言 在平时的开发中随着我们系统应用不断地迭代变的复杂,对应用的实时监控变得越来越重要.实时监控不仅可以帮助我们快速定位问题,还能在出现问题时及时采取措施,减少业务中断的时间. 本文将介绍一个名为Wa ...
- 查看 Homebrew 管理的服务的日志
TL;DR 首先找到 log 文件的位置: 对于 macOS (arm64),log 文件在 /opt/homebrew/var/log 目录下 对于 macOS (x86_64),log 文件在 / ...
- RestoreFormer++: Towards Real-World Blind Face Restoration from Undegraded Key-Value Pairs(IEEE,2023,8)
RestoreFormer++: Towards Real-World Blind Face Restoration from Undegraded Key-Value Pairs(IEEE,2023 ...
- 手写一个Promise.all
Promise.all 特性: 1. 按顺序返回结果数组; 2. 当所有promise完成才返回; 3. 返回第一个报错的promise的信息; 直接上代码: Promise._all = funct ...
- 网络安全&密码学—python中的各种加密算法
网络安全&密码学-python中的各种加密算法 一.简介 数据加密是一种保护数据安全的技术,通过将数据(明文)转换为不易被未经授权的人理解的形式(密文),以防止数据泄露.篡改或滥用.加密后的数 ...
- C++ string类型常用操作
string类型操作 字符串切割 str.substr(索引,切割的个数) -> 返回字符串 注意:第二个参数为切割的个数 string buf = "abcdefg"; ...