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 Json转换类对象,并使用

    长话短说,先上代码(今天的代码是有史以来最短的)(今天的课也是有史以来最精简...) 然后就是介绍Song是啥,上面的网站应该知道,是网易云的,不过为啥会变成这样,因为这是网易云的API网站 反正就是 ...

  2. 001_centos7下比特币源码编译安装

    今天我们介绍比特币的源码安装过程,是利用编译安装的 首先安装依赖 yum install -y boost-devel qt-devel protobuf-devel qrencode-devel l ...

  3. 用python写网路爬虫 PDF高清完整版免费下载 Python基础教程免费电子书 python入门书籍免费下载

    <用python写网路爬虫PDF免费下载>PDF书籍下载 内容简介 作为一种便捷地收集网上信息并从中抽取出可用信息的方式,网络爬虫技术变得越来越有用.使用Python这样的简单编程语言,你 ...

  4. troubleshoot之:用control+break解决线程死锁问题

    目录 简介 死锁的代码 control+break命令 Full thread dump 死锁检测 Heap信息 总结 简介 如果我们在程序中遇到线程死锁的时候,该怎么去解决呢? 本文将会从一个实际的 ...

  5. C#LeetCode刷题,走进Google,走近人生

    概述 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/1015 访问. 本系列博文将会向大家展示我在LeetCode上的刷 ...

  6. ElasticSearch 7.8.1集群搭建

    通往集群的大门 集群由什么用? 高可用 高可用(High Availability)是分布式系统架构设计中必须考虑的因素之一,它通常是指,通过设计减少系统不能提供服务的时间.如果系统每运行100个时间 ...

  7. SpringMVC大威天龙

    一 SpringMVC简介 SpringMVC是Spring提供的一个强大而灵活的Web框架 借助于注解 SpringMVC提供了几乎是POJO的开发模式 使得控制器的开发和测试更加简单 二 Spri ...

  8. 利用JavaScript当鼠标点击导航时改变背景

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

  9. 硬核干货:4W字从源码上分析JUC线程池ThreadPoolExecutor的实现原理

    前提 很早之前就打算看一次JUC线程池ThreadPoolExecutor的源码实现,由于近段时间比较忙,一直没有时间整理出源码分析的文章.之前在分析扩展线程池实现可回调的Future时候曾经提到并发 ...

  10. 2020,最新Model的设计-APP重构之路

    很多的app使用MVC设计模式来将“用户交互”与“数据和逻辑”分开,而model其中一个重要作用就是持久化.下文中设计的Model可能不是一个完美的,扩展性强的model范例,但在我需要重构的app中 ...