1.在main.js中注册全局的bus 

Vue.prototype.bus=new Vue();

2.在组建中使用

子组建使用:this.bus.$emit('自定义事件名',data)

methods:{
        handleClicks(){
        this.bus.$emit('openMenu',true)
       }
}

父组建使用:  this.bus.$on("自定义事件名", msg => {})

mounted() {
    this.bus.$on("openMenu", msg => {
    this.show = msg;
   });

}

Vue bus的使用(兄弟|非父子组件传值)-->可以使用一个空的Vue实例作为中央事件总线new Vue()的更多相关文章

  1. vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

    vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...

  2. 使用Bus.js进行兄弟(非父子)组件通信

    首先需要在任意地方添加一个bus.js: 在bus.js里面 写入下面信息 import Vue from 'vue' export default new Vue; 在需要通信的组件都引入Bus.j ...

  3. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  4. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  5. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

  6. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  7. Vue父子组件和非父子组件传值问题

    父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据,如果只是传常量,那么属性可以不用加':'(表示 ...

  8. 组件基础(非父子组件传值)—Vue学习笔记

    最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...

  9. vuejs非父子组件传值

    当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,vuejs提供了一中模式叫发布订阅模式(观察者模式,bus,总线)来处理非父子组件间的传值 <div id='root'& ...

随机推荐

  1. Python_基于Python同Linux进行交互式操作实现通过堡垒机访问目标机

    基于Python同Linux进行交互式操作实现通过堡垒机访问目标机   by:授客 QQ:1033553122 欢迎加入全国软件测试交流群:7156436 实现功能 1 测试环境 1 代码实践 2 注 ...

  2. redis redis常用命令及内存分析总结(附RedisClient工具简介

    redis常用命令及内存分析总结(附RedisClient工具简介 by:授客 QQ:1033553122 redis-cli工具 查看帮助 连接redis数据库 常用命令 exists key se ...

  3. Android Studio--gradle:download 过慢甚至超时timeout报错

    问题描述 今天第一次学习安卓,配置环境花了不少时间其他都比较容易的解决了 gradle 因为会从外国的网站下载东西会非常的慢(具体原理我也不清楚),所以最好让下载地址变成国内的 解决方案(最后有升级方 ...

  4. Apktool(2)——使用前必须知道的apk知识

    这里拿testapp.apk为例,如下图所示,左图为直接解压apk得到的文件,右图为apktool反编译得到的文件(反编译的使用在下一篇重点介绍) 图1 解压apk和反编译apk得到的文件目录对比 一 ...

  5. (python)数据结构---集合

    一.描述 set翻译为集合 set是可变的.无序的.不可重复的 set的元素要求可哈西(不可变的数据类型可哈西,可变的数据类型不可哈希) set是无序的,因此不可以索引,也不可以修改 线型结构的查询时 ...

  6. Spring Data Redis 让 NoSQL 快如闪电(2)

    [编者按]本文作者为 Xinyu Liu,文章的第一部分重点概述了 Redis 方方面面的特性.在第二部分,将介绍详细的用例.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 把 Redis ...

  7. Spring Data Redis 让 NoSQL 快如闪电 (1)

    [编者按]本文作者为 Xinyu Liu,详细介绍了 Redis 的特性,并辅之以丰富的用例.在本文的第一部分,将重点概述 Redis 的方方面面.文章系国内 ITOM 管理平台 OneAPM 编译呈 ...

  8. mysql----SELECT names/zh

    < SELECT names   Language: English  • 中文 name continent Afghanistan Asia Albania Europe Algeria A ...

  9. [20180926]神奇的规避ORA-01795方法.txt

    [20180926]神奇的规避ORA-01795方法.txt --//大家知道in里面的值限制1000个值,如果超出报ORA-01795错误. D:\> ooerr 0179501795, 00 ...

  10. myBase7.0破解

    永久性破解 Mybase7Pro破解版下载:链接:https://pan.baidu.com/s/1ezb8bSqI0OPZnVgx-snA_Q  提取码:n72t 1.下载后安装 myBase-De ...