封装好的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组件通信之非父子组件传值
前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...
随机推荐
- 关于海大邮箱(ouc.edu)客户端配置及使用说明
关于海大邮箱(ouc.edu)客户端配置及使用说明 邮箱说明 系统简介 海大邮箱使用的是论客(Coremail)提供的邮件系统:(很多大学都是) Coremail论客简介(摘自官网): Coremai ...
- K8S学习笔记之Pod的Volume emptyDir和hostPath
0x00 Volume的类型 Volume是Kubernetes Pod中多个容器访问的共享目录. Volume被定义在Pod上,被这个Pod里的多个容器挂在到相同或不同的路径下. Volume的生命 ...
- mvn clean -U -e -B -X的作用 查看详细出错信息
https://blog.csdn.net/u014515854/article/details/79820497 在持续集成服务器上使用怎样的 mvn 命令集成项目,这个问题乍一看答案很显然 ...
- SpringBoot 入门篇(二) SpringBoot常用注解以及自动配置
一.SpringBoot常用注解二.SpringBoot自动配置机制SpringBoot版本:1.5.13.RELEASE 对应官方文档链接:https://docs.spring.io/spring ...
- 【转载】 Windows系统电脑通过设备管理器查看电脑配置信息
在采购电脑或者使用电脑的过程中,有时候我们需要查看到电脑的所有设备硬件信息,此时就可以通过Windows系统自带的设备管理器界面来查看该电脑所有的设备配置信息,包括CPU型号频率.内存.硬盘型号以及容 ...
- Python操作SQLite/MySQL/LMDB
1.概述 1.1前言 最近在存储字模图像集的时候,需要学习LMDB,趁此机会复习了SQLite和MySQL的使用,一起整理在此. 1.2环境 使用win7,Python 3.5.2. 2.SQLite ...
- mongoDB看这篇就够了
写在前面 hello,小伙伴们,我是 pubdreamcc ,本篇文章依旧出至于我的 GitHub仓库 node学习教程 ,如果你觉得我写的还不错,欢迎给个 star ,小伙伴们的 star 是我持续 ...
- Nginx学习(二)
------------恢复内容开始------------ Nginx配置文件 主配置文件结构:四部分 main block:主配置段,既全局配置段,对Http,mail都有效 event{ }事件 ...
- vue脚手架引入MD5加密函数
可以在全局定义一个MD5的方法,然后引入到vue的脚手架中. 首先 npm install crypto --save 然后引用定义一个对象, import crypto from 'crypto'; ...
- 常用内置模块(一)--time、os、sys、random、shutil、pickle、json
一.time模块 Python中,通常有这几种方式来表示时间: 1.时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type( ...