组件给App全局传值vue-bus的使用
npm安装
npm install vue-bus
main.js引入
import VueBus from 'vue-bus'
Vue.use(VueBus)
组件
getHouse(e){
this.$bus.emit("bload",e);
}
app
mounted(){
//通过on监听事件,回调方法获取数据
this.$bus.on("bload",value=>{
console.log(value)
}); } ,
也可以用于兄弟组件传值,如果数据较多,可以使用vuex管理
组件给App全局传值vue-bus的使用的更多相关文章
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue组件挂载到全局方法
在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像eleme ...
- vue bus 的使用
简单的状态管理,可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定义:main.js window.even ...
- vue组件注册(极客时间Vue视频笔记)
vue组件注册 组件是为了方便代码复用,只需引入组件即可在不同的地方使用想同的功能代码 <body> <div class="app"> <todo- ...
- 组件通信之全局事件总线 & 消息订阅发布
全局事件总线 介绍 一种组件间通信的方式,适用于任意组件间通信. 在使用全局事件总线之前需要一些知识准备 所有组件实例的原型对象的原型对象就是 Vue 的原型对象,即VueComponent.prot ...
随机推荐
- UIPickView的简单使用
好记性不如烂笔头,勤做笔记. 摘要: 1.UIPickVIew 几个重要的属性 (1)datePickerMode UIDatePickerModeTime, // Displays hour, mi ...
- win7(64位)使用DEBUG
win7 64位好像是不能直接打开DOS进行DEUBG的,于是查找相应解决方案 开始看其他人的帖子,写得语焉不详,后来一查,居然是抄百度的.....自己不觉得low吗... 参考百度经验的回答http ...
- 041_go语言中的panic
代码演示: package main import "os" func main() { // panic("a problem") _, err := os. ...
- C# ASP JS引用路径不正确导致的错误
假设JS包放在根目录下的Scripts文件夹下 当前页的路径在另一个文件夹下,那么他引用JS应该:<script src="../Scripts/jquery-1.4.1.min.js ...
- AndroidStudio新建项目报错build failed
AndroidStudio新建项目报错build failed 报错信息 org.gradle.initialization.ReportedException: org.gradle.interna ...
- HTML基础-06
网页背景 1. 设置背景颜色 background-color:#bfa; 设置背景图片 background-image:url(“./img/... ...
- springboot中RedisTemplate的使用
springboot中RedisTemplate的使用 参考 了解 Redis 并在 Spring Boot 项目中使用 Redis--以IBM为学习模板 springboot之使用redistemp ...
- 【算法•日更•第五十七期】快速傅里叶变换(FFT):从入门到放弃
▎一些用的上的东西 小编太菜了,很多东西都不会证明(主要是三角函数还没有学啊~~~). 附上链接https://blog.csdn.net/enjoy_pascal/article/details/8 ...
- Gitlab-CI/CD 2
Gitlab-Runner自动构建服务器搭建2 注册Runner 上一节我们创建了自己的gitlab-runner镜像,并使用docker-compose up -d --build命令运行了一个名为 ...
- windows下RocketMQ的安装部署
一.预备环境 1.系统 Windows 2. 环境 JDK1.8.Maven.Git 二. RocketMQ部署 1.下载 1.1地址:http://rocketmq.apache.org/relea ...