Vue bus的使用(兄弟|非父子组件传值)-->可以使用一个空的Vue实例作为中央事件总线new Vue()
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()的更多相关文章
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- 使用Bus.js进行兄弟(非父子)组件通信
首先需要在任意地方添加一个bus.js: 在bus.js里面 写入下面信息 import Vue from 'vue' export default new Vue; 在需要通信的组件都引入Bus.j ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- Vue非父子组件传值
<template> <div id="app"> <v-home></v-home> <br> <hr> ...
- Vue组件传值(二)之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- Vue父子组件和非父子组件传值问题
父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据,如果只是传常量,那么属性可以不用加':'(表示 ...
- 组件基础(非父子组件传值)—Vue学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- vuejs非父子组件传值
当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,vuejs提供了一中模式叫发布订阅模式(观察者模式,bus,总线)来处理非父子组件间的传值 <div id='root'& ...
随机推荐
- 快速开发跨平台应用之Xamarin技术
Xamarin 介绍 Xamarin 是一个允许开发人员有效创建可跨 iOS.Android.Windows 应用程序的开发工具集.Xamarin是免费且开源的,遵循 MIT (麻省理工学院许可证)协 ...
- OkHttpHelper使用
源码:https://gitee.com/xcode_xiao/OkHttpHelper 网络请求缓存的支持,OKHttp Retrofit (get,post,一切,文字,图片,语音,文件,自定义缓 ...
- (后端)项目中的错误之java中判断字符里面含有某些字符
数据库的数据出现了数据错误.找到原因是因为代码里面Spring的判断所导致的.其实就是判断字符里有01,走这里,有02,走那里,全是if,但是是类似indexOf的那种判断,偏偏有一个数据是0102, ...
- Bootstrap table 分页 In asp.net MVC
中文翻译文档: http://blog.csdn.net/rickiyeat/article/details/56483577 版本说明: Jquery v2.1.1 Bootstrap V3.3.7 ...
- Java-- String源码分析
版权声明:本文为博主原创文章,未经博主允许不得转载 本篇博文基于java8,主要探讨java中的String源码. 首先,将一个类分为几个部分,分别是类定义(继承,实现接口等),全局变量,方法,内部类 ...
- 洗礼灵魂,修炼python(79)--全栈项目实战篇(7)—— 多级目录菜单之地址管理系统升级版
要求: 1.在上一篇的地址管理系统的基础上做升级改动 2.添加增删改的功能 3.尽量的贴近生活常识中的地址管理 分析: 需求不用多说了,干就完了 相关文件源码地址:github 这次由于要有增删改的操 ...
- vs2010 2013 2015 有用各种功能插件
https://blog.csdn.net/daydayup_chf/article/details/80803221
- JavaScript -- 时光流逝(二):js中数组的方法
JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...
- May 30. 2018 Week 22nd Wednesday
Never forget to say "Thanks." 永远不要忘记说谢谢. Don't take anything we get for granted, and never ...
- sci-hub免费下载论文
作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ sci-hub网址: https://gfsoso.99lb.net/sci-hub.html 免费下载 ...