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 ...
随机推荐
- 从baselines库的common/vec_env/vec_normalize.py看reinforcement learning算法中的reward shape方法
参考前文:https://www.cnblogs.com/devilmaycry812839668/p/15889282.html 2. REINFORCE算法实际代码中为什么会对一个episode ...
- [简单] 树上的dfs & bfs_洛谷P5908 猫猫和企鹅
题目链接https://www.luogu.com.cn/problem/P5908 题目大意: \[\begin{align*} & 给定n个点构成一颗树 每条边val=1\\ & ...
- Kruskal和Prim模板
例题:P3366 [模板]最小生成树 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) Kruskal #include <bits/stdc++.h> #define d ...
- 热力学平衡、Liftshitz 理论和朗道理论
科学家们经过广泛的实验发现:熔化往往始于固体表面.熔化时,体系由 "固体-气体接触" 变为 "固体-熔化层接触 + 熔化层-气体接触".如果后者的能量更稳定,则 ...
- Minnaert
Minnaert 假设气泡关闭时发生周期性膨胀和收缩,周围水也跟着振动,就嗷地一声叫了出来!设有个半径为 \(r\) 的泡形成后开始简谐振动,半径有 \[r=r_0+a\sin\frac{2\pi t ...
- DDD建模后写代码的正确姿势(Java、dotnet双平台)
本文书接上回<一种很变态但有效的DDD建模沟通方式>,关注公众号(老肖想当外语大佬)获取信息: 最新文章更新: DDD框架源码(.NET.Java双平台): 加群畅聊,建模分析.技术交流: ...
- [学习笔记]在不同项目中切换Node.js版本
@ 目录 使用 Node Version Manager (NVM) 安装 NVM 使用 NVM 安装和切换 Node.js 版本 为项目指定 Node.js 版本 使用环境变量指定 Node.js ...
- LaTeX 几种中文字体的比较
根据自己的喜好给常见的几个中文字体的打分: 字体选项 字体名 得分 adobe Adobe 宋体 Std 5 fandol FandolSong 0 founder 方正书宋_GBK 10 hanyi ...
- Android Studio 项目已经sync完成,但是在布局中显示:Design editor is unavaliable until after a sunncessful project sync
原因:在drawable文件夹中新增了一个png图标 解决:同步在drawable-v24文件中复制一份即可
- vue 报错 Component template should contain exactly one root element. If you are using v-if on multiple elements
vue 报错 Component template should contain exactly one root element. If you are using v-if on multiple ...