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'& ...
随机推荐
- RTP 流媒体
RTMP协议是Adobe的私有协议,未完全公开,RTSP协议和HTTP协议是共有协议,并有专门机构做维护. RTMP协议一般传输的是flv,f4v格式流,RTSP协议一般传输的是ts,mp4格式的流. ...
- Flutter 布局(二)- Padding、Align、Center详解
本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...
- Django 配置MySQL数据库
在settings.py中配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # 数据库引擎 'NAME': 'my ...
- js时间戳转化时间格式
// 判断是否前面补0 add0 (m) { return m < 10 ? '0' + m : m }, // 时间转化 timeFormat (timestamp) { // timesta ...
- linux 命令之netstat
转自:http://www.maomao365.com/?p=699 linux 命令之netstat 在linux中netstat命令的作用是查看TCP/IP网络当前所开放端口,所对应的本地和外地端 ...
- NSMutableArray 增删操作测试
NSMutableArray *testArray = [NSMutableArray array]; [testArray addObject:"]; [testArray addObje ...
- linux shell 指令 诸如-d, -f, -e之类的判断表达式简介
一.文件比较运算符 1. e filename 如果 filename存在,则为真 如: [ -e /var/log/syslog ] 2. -d filename 如果 filename为目录,则为 ...
- monkeyrunner.bat运行python脚本/命令行
http://luochunfeng163.blog.163.com/blog/static/1670092492014258914775/
- python模块:xlsxwriter和xlrd相结合读取、写入excel文件
python模块简单说明: xlsxwriter:负责写入数据 xlrd:负责读取数据 xlsxwriter 官方文档:http://xlsxwriter.readthedocs.org 本实例是刚写 ...
- Android Studio教程03-Activtiy生命周期的理解
目录 1. Activity 1.1. 安卓中的Activity定义和特性: 1.2. 注册Activity 1. Intent filters:设置默认开启的activity 1.3. Activi ...