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. 关键字Run Keyword If 如何写多个条件语句、如何在一个条件下执行多个关键字

    Run Keyword If 关键字给出的示例是: 但是,这往往不能满足我们实际需要,比如,我们需要同时判断多个条件是否成立,或者在条件成立时我们想要执行多个关键字,虽然可以进行封装再调用,但是比较麻 ...

  2. 制作的excel表格如何放到微信公众号文章中?

    制作的excel表格如何放到微信公众号文章中? 我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件 ...

  3. Kubernetes Pod OOM 排查日记

    一.发现问题 在一次系统上线后,我们发现某几个节点在长时间运行后会出现内存持续飙升的问题,导致的结果就是Kubernetes集群的这个节点会把所在的Pod进行驱逐OOM:如果调度到同样问题的节点上,也 ...

  4. C#LeetCode刷题之#349-两个数组的交集(Intersection of Two Arrays)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4042 访问. 给定两个数组,编写一个函数来计算它们的交集. 输入 ...

  5. Android开发学习进程0.18 SharePreference的使用 AIDL

    SharePreference SharePreference是一种持久化存储手段,使用场景很多,如第一次打开时加载的用户协议等.适合小数据单进程的应用.将数据以键值对的形式存储在XML中. 使用方式 ...

  6. Git常用命令参考手册

    配置 # 查看全局配置列表 git config -l # 查看局部配置列表 git config --local --list # 查看已设置的全局用户名/邮箱 git config --globa ...

  7. (转)软件产品化,国内IT人之痛

    原文链接:http://blog.csdn.net/harrymeng/article/details/5254415 记得在网上看过一则印度软件的有趣故事,意思是先从印度6个不同城市的软件公司中选出 ...

  8. 火题大战Vol.0 B 计数DP

    火题大战Vol.0 B 题目描述 \(n\) 个沙茶,被编号 \(1\)~$ n$.排完队之后,每个沙茶希望,自己的相邻的两人只要无一个人的编号和自己的编号相差为 \(1\)(\(+1\) 或\(-1 ...

  9. magento paypal测试配置

    1.登录https://developer.paypal.com 2.在https://developer.paypal.com/developer/accounts/中创建

  10. netbox demo

    参考链接:https://pypi.org/project/python-netbox/ # python 参考链接 https://ttl255.com/pynetbox-netbox-python ...