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. 快速开发跨平台应用之Xamarin技术

    Xamarin 介绍 Xamarin 是一个允许开发人员有效创建可跨 iOS.Android.Windows 应用程序的开发工具集.Xamarin是免费且开源的,遵循 MIT (麻省理工学院许可证)协 ...

  2. mysql的连接

    本文内容: mysql客户端连接服务端 断开连接 首发日期:2018-04-07 mysql客户端连接服务端: 连接服务端的命令基本语法是: mysql -h host -u user -p -P p ...

  3. 方法调用 Controller的Action 参数

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  4. 谈谈装xp官方纯净系统屡次失败的深刻体会

    有木有,小硬盘小内存的电脑竟然装不了五六百m大小的xp却能装win7之类的而感到痛失,如果去装win7电脑果断卡死, 用了最流行的制作u盘启动的软件都不行, 任何直接点击安装也不行,点不了安装的那个选 ...

  5. Powershell远程执行命令

    $Username = 'xx' $Password = 'xx' $ComputerName='xx' $pass = ConvertTo-SecureString -AsPlainText $Pa ...

  6. JS 代码中到底加不加分号

    背景 在写自动执行函数时 vm.$watch('datas', function() { console.log(vm.datas); }) (function () { console.log('t ...

  7. Microsoft .NET Framework 3.5 离线安装方法 (仅适用于Win8以上的系统)

    所需工具:本系统对应原版镜像或Win8以上操作系统原版ISO镜像 操作: 1.利用Windows资源管理器挂载 ISO 镜像,或其他虚拟光驱工具挂载镜像,记住挂载的盘符 2.打开Windows命令提示 ...

  8. KVM使用

    这里使用的是Ubuntu18.04桌面版虚拟机 关于KVM可以看一下我之前的博客,有一些简单的介绍. 1.在打开虚拟机之前先开启此虚拟机的虚拟化功能. 2.安装KVM及其依赖项 wy@wy-virtu ...

  9. LeetCode算法题-Single Number(Java实现)

    这是悦乐书的第175次更新,第177篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第34题(顺位题号是136).给定一个非空的整数数组,除了一个元素外,每个元素都会出现两 ...

  10. 洛谷模拟NOIP考试反思

    洛谷模拟NOIP考试反思 想法 考了这么简单的试qwq然而依然emmmmmm成绩不好 虽然本次难度应该是大于正常PJ难度的但还是很不理想,离预估分数差很多qwq 于是就有了本反思嘤嘤嘤 比赛链接 原比 ...