封装好的observer.js,用于非父子组件传值,直接调用$on和$emit方法
const eventList = {}
const $on = (eventName,callback)=>{
if(!eventList[eventName]){
eventList[eventName] = [];
}
eventList[eventName].push(callback)
}
const $emit = (eventName,params)=>{
if(eventList[eventName]){
let arr = eventList[eventName];
arr.map((cb)=>{
cb(params);
})
}
}
const $off = (eventName,callback)=>{
if(eventList[eventName]){
if(callback){
let index = eventList[eventName].indexOf(callback);
eventList[eventName].splice(index,1);
}else{
eventList[eventName].length = 0;
}
}
}
export default {
$on,
$emit,
$off
}
封装好的observer.js,用于非父子组件传值,直接调用$on和$emit方法的更多相关文章
- vue中父子组件传值问题 通过props 和 $emit()方法
(代码在最后) 1.父组件给子组件传值直接通过props,听着很简单,但是对于初学者来说还是比较难以理解的,今天小白通过自己的实践操作结合代码分析一下 案例 把模态框单独的抽离出来,当作一个组件 第 ...
- 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学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- vuejs非父子组件传值
当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,vuejs提供了一中模式叫发布订阅模式(观察者模式,bus,总线)来处理非父子组件间的传值 <div id='root'& ...
- React 父子组件和非父子组件传值
零.this.props 可以接收到 外界的传值 和 此组件标签内部自定义的方法 例: <one vals={message} sendVal={this ...
- Vue组件通信之非父子组件传值
前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...
随机推荐
- Java学习:JDBC快速入门
本节类容 JDBC基本概念 快速入门 JDBC基本概念 概念: Java DataBase Connectivity Java 数据库连接,Java语言操作数据库 JDBC本质: 其实是官方(sun公 ...
- TestNG系列(三)TestNG之XML文件配置
前言 上一篇博客说了TestNG的注解,这篇博客来介绍Test.xml文件. Test.xml文件可以更方便的管理和执行测试用例 一.Test.xml-suite: suite为Test.xml的根节 ...
- MySQL远程连接ERROR 2003 (HY000):Can't connect to MySQL server on'XXXXX'(111) 的问题
装了个navicat ,然后去连接mysql服务器,一直连不上,一开始以为是防火墙问题,后来防火墙都关闭, iptable服务关闭,还是不行,网上查了下:主要是因为设置了bind_address=12 ...
- CLR学习之初识CLR
一.什么是CLR? CLR即公共语言运行时(Common Language Runtime,简称CRL),就是微软为.net产品构建的运行环境,与java的JVM类似,通俗的讲就是.net虚拟机.CL ...
- 类嵌套_list泛型_餐馆点菜例
form1内容: private void button1_Click(object sender, EventArgs e) { //声明并初始化一张点菜清单 yiduicai danzi = ne ...
- MVC拦截
1using System; 2using System.Collections.Generic; 3using System.Linq; 4using System.Web; 5using Syst ...
- Java自学-日期 Calendar
Java的Calendar类 Calendar类即日历类,常用于进行"翻日历",比如下个月的今天是哪天 示例 1 : Calendar与Date进行转换 采用单例模式获取日历对象C ...
- ios app UI自动化测试用到的命令
ios测试的app测试包,真机设备需要开发者证书并且将测试机的udid加入到pp文件文件,configruation 要求为debug模式的ipa包, 1.苹果手机的UDID, a.通过 xcode- ...
- MybatisGenerator生成SSM的dao层
官网下载 mybatis generator 下载generator的release版本mybatis-generator-core-1.4.0-bundle.zip https://github.c ...
- ES6 笔记汇总
ES6 笔记汇总 二.ES6基础-let和const命令 三.变量的解构赋值 四.字符串的拓展 五.正则表达式的拓展 ...将会持续更新,敬请期待