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 对服务器返回数据编码进行判断之chardet

    对服务器返回数据编码进行判断之chardet by:授客 QQ:1033553122   测试环境 Win764Bit   chardet-2.3.0 下载地址1:https://pypi.pytho ...

  2. sublime使用Package Control不能正常使用的解决办法

    标签: Sublime作为一款非常优秀的编辑器,套用中学语文课本里一篇讲梁启超的文章里形容梁启超的一句话,就是“短小精悍”.说它“短小”,是因为它的轻量级:说它“精悍”,则得益于它那包罗万象以适用于任 ...

  3. (转载)SPARKR,对RDD操作的介绍

    原以为,用sparkR不能做map操作, 搜了搜发现可以. lapply等同于map, 但是不能操作spark RDD. spark2.0以后, sparkR增加了 dapply, dapplycol ...

  4. DOIS 2018 — OneAPM 蓝海讯通以数据为中心的 AIOps 平台亮相

    AIOps 近两年开始在运维圈子里面火了起来.一夜间传统和新兴的运维管理软件供应商,IT 运维系统开发商,大数据厂商,人工智能算法提供商,还有 BAT,大家都在谈论这个话题.在短短的不到 1 年时间中 ...

  5. postgresql自定义类型并返回数组

    转自 https://blog.csdn.net/victor_ww/article/details/44415895 create type custom_data_type as ( id int ...

  6. SQL Server @@ERROR的小误区大Bug

    在公司项目中看到有这样使用事务的: -- 开启事务 BEGIN TRAN ) ) BEGIN ROLLBACK TRAN END COMMIT TRAN 乍一看没啥问题,仔细思考就能发现有很大的问题. ...

  7. Angular四大核心特性

    Angular四大核心特性 Angular四大核心特性理论概述 MVC模式:它目的是为了分离视图.模型和控制器而设计出来的:其中数据模型用来储存数据,视图用来向用户展示应用程序,控制器充当模型和视图之 ...

  8. 【C编程基础】C编译链接命令gccc

    1.gcc安装 rpm -qa|grep gcc ==>检查gcc是否安装 gcc -v ==>检查gcc版本 yum -y install gcc ==>安装gcc  2.基本语法 ...

  9. 转 jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var setting ...

  10. 【CQOI2017】小Q的表格

    [CQOI2017]小Q的表格 稍加推导就会发现\(f(a,b)=a\cdot b\cdot h(gcd(a,b))\). 初始时\(h(n)=1\). 询问前\(k\)行\(k\)列时我们就反演: ...