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. 自定义View类

    一.如何创建自定义的View类 ①.创建一个继承android.view.View类的Java类,并且重写构造方法(至少需要重写一个构造方法) ②.根据需要重写其他方法 ③.在项目的活动中,创建并实例 ...

  2. Kotlin Native

    Kotlin Native 不是 Jni 的概念,它不仅仅是要与底层代码比如 C.C++ 交互,而且还要绕过 Jvm 直接编译成机器码供系统运行.也就是说,Kotlin 准备丢掉 Java 这根拐杖了 ...

  3. Sqlserver还原master

    net stop mssqlserver net start mssqlserver /m"SQLCMD" sqlcmd -s xx sqlcmd -s xx -U sa -P x ...

  4. Echars鼠标点击事件多次触发

    gChart.on('click', function (params) { if (params.componentSubType == "bar" && par ...

  5. python简单的监控脚本-利用socket、psutil阻止远程主机运行特定程序

    python简单的监控脚本-利用socket.psutil阻止远程主机运行特定程序 psutil是一个跨平台的库(http://code.google.com/p/psutil/),能够轻松的实现获取 ...

  6. 一、Selenium 工作原理

    1.Selenium介绍 Selenium是用于测试Web应用程序用户界面UI的常用框架.端对端的功能测试.并且在一个多个浏览器中操作. 目前Seienium 组件主要包括Selenium IDE   ...

  7. NumPy 中的集合运算

    怎样快速找出两个数组中相同的元素? numpy.isin(element,test_elements,assume_unique = False,invert = False ) 计算test_ele ...

  8. Linux端口映射,80端口映射到8080端口

    iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080 其中eth0为外网网卡名称 ipt ...

  9. 《Java大学教程》—第12章 案例研究--第2部分

    本章就是上一章的延续,主要是用GUI实现了控制界面. 编程练习:代码附件Hostel.java1.    正确运行2.    Runhostel.java3.    searchButton

  10. Java锁的种类以及辨析(二):自旋锁的其他种类

    作者:山鸡 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized 和 ReentrantLock等等 ) .这些已经写好提供的锁为我们开发提供了便利,但是锁的具 ...