原生js和vue之间的数据通讯--EventEmitter

摘要:
this.event[type].includes){this.event[type].push;}}否则{this.event〔type〕=〔listener〕;}}//发出{if{this.event〔type〕.map;}}//删除侦听器removeListener{如果{this.event〔type〕=this.event[type〕.filter(item=>item!==func);如果{delete this.event[type〕;}}//删除所有侦听器removeAllListener(){this.event={};}}

有个小项目在原来原生的框架编写,但是不想写原生,就引入了vue

然后有个需求要和原生的js进行交互通讯,于是就可以用node.js EventEmitter

具体做法:

先引入文件<script src="http://t.zoukankan.com/js/eventEmitter.js"></script>,

初始化,

然后在vue里面发送emit,

在外面监听on

var event = new EventEmitter();

$(document).ready(function () {
    //监听some_event事件
    event.on('some_event', function (data) {
        
    });
})
 
let vm = new Vue({
    el: "#app",
    methods: {
        getList() {
            // 触发事件
            event.emit('some_event','params');
        },
    }

});    

附上eventEmitter.js

class EventEmitter {
  constructor() {
    this.event = {};
    this.maxListerners = 10;
  }
  // 监听
  on(type, listener) {
    if (this.event[type]) {
      if (this.event[type].length >= this.maxListerners) {
        console.error('同一个监听器最多被十个对象监听,否则可能造成内存泄漏.
');
        return;
      }
            if (!this.event[type].includes(listener)) {
                this.event[type].push(listener);
            }
    } else {
      this.event[type] = [listener];
    }
  }
  //发送监听
  emit(type, ...rest) {
    if (this.event[type]) {
      this.event[type].map(fn => fn.apply(this, rest));
    }
  }
  //移除监听器
  removeListener(type,func) {
    if (this.event[type]) {
            this.event[type] = this.event[type].filter(item => item !== func);
            if (this.event[type].length === 0) {
                delete this.event[type];
            }
    }
  }
  //移除所有的监听器
  removeAllListener() {
    this.event = {};
  }
}

免责声明:文章转载自《原生js和vue之间的数据通讯--EventEmitter》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇安卓 验证码输入框InputCode(同时支持密码输入)python使用关键字爬取url下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

给11gR2 RAC添加LISTENER监听器并静态注册

之前有同学想要给11gR2的RAC添加LISTENER监听器,查看了listener.ora并发现问题: [oracle@vrh2 ~]$ lsnrctl status LSNRCTL for Linux: Version 11.2.0.3.0 - Production on 04-DEC-2011 02:51:40 Copyright (c) 1991...

vue使用keep-alive缓存页面,返回页面时刷新部分数据

作用: 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了. 介绍: keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免...

【干货】前端开发VUE实例

  最近公司招聘前端开发----VUE方向。   技术面试是必不可少的,发现大多数人应该没有掌握其开发技术,今天就大概总结一下   一、准备工作   需要用到VSCODE最新版,nodejs,vue2.0(现在vue3.0已经出来了,但是大多数公司还是用的vue2.0)   具体安装配置就不说了,网上太多了,况且面试的电脑上一般都已经安装好了。   二、创...

01 Vue基础

1. vue 概述# Vue:渐进式JavaScript框架 vue官网 https://cn.vuejs.org/v2/guide/ 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩 高效:20kB运行大小,超快虚拟DOM 2...

原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度

JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 : $(document).width(); 浏览器当前窗口...

用gulp清除、移动、压缩、合并、替换代码

之前前端代码部署时用的是grunt,后来又出了个gulp工具,最近试用了一下,很方便,感觉比grunt简单好用,下面把一些常见的任务列一下,备用。 var gulp = require('gulp'); var sdir = '0.0.1'; var ddir = '0.0.1.release'; var gutil = require('gulp-u...