您现在的位置是:首页 > 正文

vue2 简单说明 $emit $on $off 的使用,防止$on多次触发

2024-02-01 00:22:28阅读 2

介绍

1. $emit:触发当前实例上的事件。附加参数都会传给监听器回调。

2. $on:监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

3. $off:移除自定义事件监听器。

场景

从详情页回到列表页时,把详情页的参数带回到列表页。

也可以说是在列表页监听并接收详情页在该事件的回调。

使用

1. 先在项目中新建一个js文件(eventbus.js),内容为:

import Vue from 'vue'

export default new Vue();

2. 在列表页和详情页都需要引入eventbus.js

import EventBus from '@/utils/eventbus.js';

3. 详情页触发事件($emit):

EventBus.$emit('changeEvent', '参数1');

4. 列表页监听事件($on):

mounted() {
    EventBus.$on('changeEvent',(result) => {
	    console.log(result); // 返回:参数1
	})
},
destroyed() {
	EventBus.$off('changeEvent');
},

防止$on多次触发,需要$off进行销毁。

网站文章

  • 异步并发任务的调度器 —— 两种实现方案

    实现一个具有并发数量限制的异步任务调度器,可以规定最大同时运行的任务。

    2024-02-01 00:22:22
  • centos7命令行版 Cuckoo安装记录(多客户机扩展)

    centos7命令行版 Cuckoo安装记录(多客户机扩展)

    解决步骤:1. 首先检查linux有没有安装python-pip包,执行1. 没有python-pip包,执行命令2. 上条指令执行成功之后,再次执行3. 对安装好的pip进行升级(为了避免后面安装出...

    2024-02-01 00:22:15
  • 第一次用idea写SSM框架的项目就遇到自动注入失败的问题

    以前一直用的eclipse写代码,今天写用idea写了下代码,结果一直报错,错误如下: org.springframework.beans.factory.BeanCreationException:...

    2024-02-01 00:21:46
  • layui表格里加入input标签

    layui表格里加入input标签

    layui表格里加入input标签 问题:如何在表格里添加input标签,并且设置input标签的类型为时间格式,即将input标签的“type”设置为“date”,然后在编辑完input标签里面的内...

    2024-02-01 00:21:39
  • 计划任务提权

    计划任务提权

    计划任务提权

    2024-02-01 00:21:33
  • java 解析中文xml_java如何解析XML

    java 解析中文xml_java如何解析XML

    DOM方式解析XMLDom解析是将xml文件全部载入到内存,组装成一颗dom树,然后通过节点以及节点之间的关系来解析xml文件,与平台无关,java提供的一种基础的解析XML文件的API,理解较简单,但是由于整个文档都需要载入内存,不适用于文档较大时。 (推荐学习:java课程)SAX方式解析XML基于事件驱动,逐条解析,适用于只处理xml数据,不易编码,而且很难同时访问同一个文档中的...

    2024-02-01 00:21:04
  • 编程过程中常见几何数学公式汇总

    1、已知直线上两点求直线的一般式方程已知直线上的两点P1(X1,Y1) P2(X2,Y2), P1 P2两点不重合。则直线的一般式方程AX+BY+C=0中,A B C分别等于:A = Y2 - Y1B = X1 - X2C = X2*Y1 - X1*Y22、过直线外一点P0(x0,y0)的垂线方程:y=(B/A)*(x-x0)+y03、求直线与垂线的交点x=((B^2)...

    2024-02-01 00:20:57
  • C++中的类型转换static_cast、dynamic_cast、const_cast和reinterpret_cast总结

    C++中的类型转换static_cast、dynamic_cast、const_cast和reinterpret_cast总结

    原文:http://www.jb51.net/article/55885.htm这篇文章主要介绍了C++中的类型转换static_cast、dynamic_cast、const_cast和reinterpret_cast总结,需要的朋友可以参考下前言这篇文章总结的是C++中的类型转换,这些小的知识点,有的时候,自己不是很注意,但是在实际开发中确实经常使用的。俗话

    2024-02-01 00:20:49
  • MySQL LIKE 子句

    MySQL LIKE 子句

    MySQL LIKE 子句 我们知道在 MySQL 中使用 SQL SELECT 命令来读取数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录。 WHERE 子句中可以...

    2024-02-01 00:20:20
  • 面试题 position有哪些值?有什么作用?

    static:默认值; 不脱离文档流,top,right,bottom,left等属性不生效。 绝对定位:absolute 绝对定位的关键是找对参照物,要成为绝对定位元素的参照物必须满足以下两个条件: 1.参照物和绝对定位元素必须是包含与被包含关系; 2.该参照物必须具有定位属性; 如果找不到满足以上两个条件的父包含块,那么相对于浏览器窗口进行定位。 注:设置了position...

    2024-02-01 00:20:13