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. Android Studio--家庭记账本(二)

    家庭记账本APP目前实现了记账功能,也就是说增加功能,今天打算添加删除功能,参考着增加的代码研究,从网上查阅资料,打算实现左滑删除功能,目前学到了xml里面的HorizontalScrollView布 ...

  2. tensorflow 三种模型:ckpt、pb、pb-savemodel

    1.CKPT 目录结构 checkpoint: model.ckpt-1000.index model.ckpt-1000.data-00000-of-00001 model.ckpt-1000.me ...

  3. Visual-platform,基于Vue的可视化大屏开发GUI框架

    visual-platform 基于Vue的可视化大屏开发GUI框架 ------ CreatedBy 漆黑小T 构建用于开发可视化大屏项目的自适应布局的GUI框架. github仓库: https: ...

  4. C#设计模式之1-工厂方法模式

    工厂方法模式(Factory Method Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/389 访问 ...

  5. imx28x arm-gcc arm-linux-4.4.4 EasyARM-iMX283

    gcc-4.4.4-glibc-2.11.1-multilib-1.0_EasyARM-iMX283.tar.bz2 提取码: UgUtMUNX

  6. c++ sort函数三个参数解释

    第一个参数 一般为 排序的起始点 vector.begin()(起点) 或者其他位置 第二个参数 一般为 排序的终止点 vector.end() (终点) 或者其他位置 第三个参数是排序函数 对于一些 ...

  7. 阙乃祯:网龙在教育领域Cassandra的使用

    网龙是一家游戏公司,以前是做网络在线游戏的,现在开始慢慢转型,开始从事在线教育. 在线教育已经做了5-6年时间了.为什么我们会用Cassandra呢?那我们就来介绍今天的议题. 首先介绍我们的业务背景 ...

  8. 为创建Golang GUI程序选择合适的库

    我认为在Go语言中创建GUI只有两种相对较好的方式,一是Qt,二则是Electron. 如何选择? 这要看你的需求.如果你会HTML+CSS+JavaScript,只想使用Go开发对性能没有多高的程序 ...

  9. git操作练习

    github账号注册很久了,使用过idea的版本管理,但是命令行还不会.正好新写了一个小项目,练习一下如何上传到github. @ 目录 新建github仓库 安装git 上传项目 1.创建本地版本库 ...

  10. Python3技巧:动态变量名

    Firstly 各位应该做过服务器运维吧,像这样: 那么,在服务器运维的程序中,最好的访问服务器的方式是:运维库名.服务器名 由于服务器名是动态的,所以变量名也是动态的.今天我们就来讲讲Python3 ...