当前位置:   article > 正文

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

vue2 $on

介绍

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

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

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

场景

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

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

使用

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

  1. import Vue from 'vue'
  2. export default new Vue();

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

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

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

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

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

  1. mounted() {
  2. EventBus.$on('changeEvent',(result) => {
  3. console.log(result); // 返回:参数1
  4. })
  5. },
  6. destroyed() {
  7. EventBus.$off('changeEvent');
  8. },

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/222751
推荐阅读
相关标签
  

闽ICP备14008679号