组件给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 ...
随机推荐
- Access to XMLHttpRequest at xxxx from origin ‘null‘ has been blocked by CORS policy:
使用前后端分离的方式创建web项目的时候出现问题: 这是因为 ajax 请求的对应的域在本地的一个文件路径,比如在D盘的某个文件夹,这里存放的都是前端文件: 但是对应的服务器是 localhost 的 ...
- 微信公众号添加zip
微信公众号添加zip的教程 我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件. 以下是公众号添加 ...
- MyBatisPlus分页查询,删除操作
分页查询 分页查询在网页使用十分之多 原始的limit进行分页 pageHelper第三方插件 3. MP内置的分页插件 导入配置 如何使用,官网的代码如下 //分页插件 @Bean public P ...
- SwaggerUI看烦了,IGeekFan.AspNetCore.Knife4jUI 帮你换个新皮肤
背景 好像是上周四,看到微信群有人说java有轮子swagger-bootstrap-ui,而c#,就是找不到. 于是我一看,就说大话:"这个只是一套UI,他这个有开源地址么" 被 ...
- flask_restful实现文件下载功能
环境:前后端完全分离,后端flask_restful,前端vue from flask_restful import reqparse, Resource from flask import send ...
- Maven报错Missing artifact jdk.tools:jdk.tools:jar:1.7
1.eclipse中Maven项目的pom文件报错: 2.解决方法: 直接在pom.xml中加上一个依赖项目: <dependency> <groupId>jdk.t ...
- MySQL空间函数实现位置打卡
项目需求是跟用户当前位置判断是否在给定的地理位置范围内,符合位置限制才可以打卡,其中的位置范围是一个或多个不规则的多边形.如下图,判断用户是在清华还是北大. 图形获取区域坐标 因为项目前端使用微信小程 ...
- Hive中的用户自定义函数
1.1 关于自定义函数 1)Hive 自带了一些函数,比如:max/min等,但是数量有限,自己可以通过自定义UDF来方便的扩展. 2)当Hive提供的内置函数无法满足你的业务处理需要时,此时就可以考 ...
- mysql 1215错误 外键建立失败
在Mysql中创建数据表时,经常会遇到问题而失败,其中建立外键有很多细节需要我们去留意,主要有以下几种常见原因. 1. 两个字段的类型或者大小不严格匹配.例如,如果一个是int(10),那么外键也必 ...
- golang 判断前缀后缀、包含关系
HasPrefix 判断字符串 s 是否以 prefix 开头:strings.HasPrefix(s, prefix string) bool HasSuffix 判断字符串 s 是否以 suffi ...