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的使用的更多相关文章

  1. vue bus方式解决非父子组件间的传值

    对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...

  2. Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  4. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

  5. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  6. vue组件挂载到全局方法

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像eleme ...

  7. vue bus 的使用

    简单的状态管理,可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定义:main.js window.even ...

  8. vue组件注册(极客时间Vue视频笔记)

    vue组件注册 组件是为了方便代码复用,只需引入组件即可在不同的地方使用想同的功能代码 <body> <div class="app"> <todo- ...

  9. 组件通信之全局事件总线 & 消息订阅发布

    全局事件总线 介绍 一种组件间通信的方式,适用于任意组件间通信. 在使用全局事件总线之前需要一些知识准备 所有组件实例的原型对象的原型对象就是 Vue 的原型对象,即VueComponent.prot ...

随机推荐

  1. 全程干货,requests模块与selenium框架详解

    requests模块 前言: 通常我们利用Python写一些WEB程序.webAPI部署在服务端,让客户端request,我们作为服务器端response数据: 但也可以反主为客利用Python的re ...

  2. SQL性能优化-查询条件与字段分开执行,union代替in与or,存储过程代替union

    PS:概要.背景.结语都是日常“装X”,可以跳过直接看优化历程 环境:SQL Server 2008 R2.阿里云RDS:辅助工具:SQL 审计 概要 一个订单列表分页查询功能,单从SQL性能来讲,从 ...

  3. ROS 八叉树地图构建 - 安装 octomap 和 octomap_server 建图包!

    项目要用到八叉树库 Octomap 来构建地图,这里记录下安装.可视化,并启用带颜色的 Octomap 的过程. 一.Apt 安装 Octomap 库 如果你不需要修改源码,可以直接安装编译好的 oc ...

  4. 07 CentOS简单命令与XShell简单使用

    关机 poweroff 重启 init 6 查看ip地址 ifconfig 查看当前目录下的文件与目录 ls ll 判断命令是内部还是外部的类型 type ifconfig 通过file /sbin/ ...

  5. C#LeetCode刷题之#709-转换成小写字母(To Lower Case)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3965 访问. 实现函数 ToLowerCase(),该函数接收一 ...

  6. 报错:无效的列类型: 1111;must be specified for all nullable parameters.

    org.springframework.jdbc.UncategorizedSQLException: Error setting null parameter. Most JDBC drivers ...

  7. 【HDU3038】How Many Answers Are Wrong - 带权并查集

    描述 TT and FF are ... friends. Uh... very very good friends -________-b FF is a bad boy, he is always ...

  8. Spark从入门到放弃---RDD

    什么是Spark? 关于Spark具体的定义,大家可以去阅读官网或者百度关于Spark的词条,在此不再赘述.从一个野生程序猿的角度去理解,作为大数据时代的一个准王者,Spark是一款主流的高性能分布式 ...

  9. 几种定时任务(Timer、TimerTask、ScheduledFuture)的退出—结合真实案例【JAVA】

    工作中常常会有定时任务的开发需求,特别是移动端.最近笔者正好有所涉及,鉴于此,结合开发中的案例说明一下几种定时任务的退出. 需求说明:定时更新正在生成的文件大小和状态[进行中.失败.完成],如果文件生 ...

  10. python 03 常用操作符

    1. e记法,科学计数法. AeB   A,B为整数,A*10的B次方. 2. 逻辑运算,真为1,假为0,最好不使用这个计算 true(1)    false(0) true+true=2 3.类型转 ...