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'& ...
随机推荐
- MySQL 在Windows平台上的安装及实例多开
MySQL在Windows平台上的安装及实例多开 by:授客 QQ:1033553122 测试环境 Win7 64 mysql-5.7.20-winx64.zip 下载地址: https://cd ...
- Loadrunner 脚本开发-利用web_submit_data函数实现POST请求
脚本开发-利用web_submit_data函数实现POST请求 by:授客 QQ:1033553122 概述 web_link()和web_url()函数都是页面访问型函数,实现HTTP请求中的 ...
- Quill Editor使用公式
const katex = require('katex'); const win: any = window; win.katex = katex; 首先,引入katex @import '~kat ...
- SQL SERVER的锁机制
SQL SERVER的锁机制(一)——概述(锁的种类与范围) SQL SERVER的锁机制(二)——概述(锁的兼容性与可以锁定的资源) SQL SERVER的锁机制(三)——概述(锁与事务隔离级别) ...
- Windows Server 2016-系统安装软硬件要求
本章为大家补充介绍安装 Windows Server 2016的最低系统要求. 如果安装时选择通过"服务器核心"选项进行安装,则应注意,没有安装任何 GUI 组件,并且将不能使用服 ...
- python集合与字典的用法
python集合与字典的用法 集合: 1.增加 add 2.删除 •del 删除集合 •discard(常用)删除集合中的元素 #删除一个不存在的元素不会报错 •remove 删除一个不存在的 ...
- [HBase_1] HBase安装与配置
0. 说明 1. 简介 1.1 简介 基于 HDFS 的大表软件(实时数据库) 十亿行 x 百万列 x 上千个版本 版本是通过 mvcc 技术控制:multiple version concurren ...
- IIS 部署问题 404
在部署IIS环境中,偶尔会遇到 404 错误,就算以前遇到过,也因为时间久了导致大概知道是什么错了,具体解决方案觉忘了,所以留下一个记录,留给自己,也是给大家一点提醒.(注:错误信息也懒得截图了,希望 ...
- js 编辑数组
删除数组第一个元素使用var length = arr.shift(); 删除arr的第一个元素后, 返回值是删除后的数组长度 删除数组最后一个元素使用var length = a ...
- Tomcat结构
Tomcat结构 Server(服务器) 服务器代表整个Tomcat容器. Tomcat提供了服务器接口的默认实现(很少由用户定制). Service(服务) 服务是位于服务器内部的中间组件,将一个或 ...