程序化的事件侦听器

简介: 程序化的事件侦听器

吾心信其可行,则移山填海之难,终有成功之日。——孙中山

vue官方文档——程序化的事件侦听器

vue官方文档——实例方法/事件

我们可以使用this.$onvue中侦听一个事件

vm.$on('test', function (msg) {
  console.log(msg)
})

然后我们可以在其他地方访问它

vm.$emit('test', 'hi')
// => "hi"

例如这里,我在一个页面中使用vm.$on

而在另一处中使用vm.$emit

可以看到成功调用test事件

基于这一点,我们可以在uniapp中进行页面间的通信

uniapp官方文档

也就是说,在其中一个页面中我们使用uni.$on或者uni.$once,在另一个页面中就可以使用uni.$emit进行调用,前提是uni,$on或者uni.$once必须触发成功

uni.$once触发后就会立马移除该监听器,也就是说只能触发一次

uni.$on就只能使用uni.$off进行手动移除

比如我这里在index.nvue页面中挂载

<template>
  <view>
    <view>{{ val }}</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      val: 0
    };
  },
  onLoad() {
    uni.$on('add', this.add);
  },
  methods: {
    add(e) {
      console.log('主页的add被触发了!: ', e);
      this.val += e.data;
    }
  }
};
</script>

然后到list页面中调用

<template>
  <view>
  </view>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  onLoad() {
    setInterval(() => {
      uni.$emit('add', {
        data: 2
      });
    }, 1000);
  },
  methods: {
  }
};
</script>

我们进入index页面,再进入list页面触发后,回到index页面就可以看到它的add函数成功触发了每秒加2的效果

相关文章
|
3月前
|
JavaScript UED
常见的触发函数的事件(实现不同的用户体验)
常见的触发函数的事件(实现不同的用户体验)
17 0
|
8月前
|
JavaScript API
StencilJs 学习之事件
其实并没有所谓的 stencil Event,相反 stencil 鼓励使用 DOM event。然而,Stencil 提供了一个 API 来指定组件可以触发的事件,以及组件监听的事件。 这是通过 Event()和 Listen()装饰器实现的。
53 0
uiu
|
JavaScript 调度
【Svelte】-(5)DOM事件 / 事件修饰符 / 组件事件 / 事件转发 (组件之间的事件沟通)
【Svelte】-(5)DOM事件 / 事件修饰符 / 组件事件 / 事件转发 (组件之间的事件沟通)
uiu
145 0
【Svelte】-(5)DOM事件 / 事件修饰符 / 组件事件 / 事件转发 (组件之间的事件沟通)
|
API 数据库
9.2领域事件
领域(近似理解为实现某个功能的多个模型)事件可以切断领域模型之间的强依赖关系,事件发布后,由事件的处理者决定如何响应事件,以便于实现事件发布和事件处理的解耦。
|
JavaScript
史上最详细的DOM事件之表单事件
史上最详细的DOM事件之表单事件 上篇博客讲了DOM的键盘事件,这篇博客我们来讲一讲DOM的表单事件。 HTML代码: &lt;form action=&quot;&quot;&gt; &lt;input type=&quot;text&quot; autofocus&gt; &lt;br&gt; &lt;input type=&quot;text&quot;&gt;&lt;br&gt; &lt;input type=&quot;search&quot;&gt;&lt;br&gt; &lt;input type=&quot;reset&quot;&gt;&lt;br&gt; &lt;input type=&quot;submit&quot;&gt;&lt;br&gt; &lt;textarea name=&quot;&quot; id=&quot;area&quot; cols
|
JavaScript 前端开发
事件
事件
158 0
|
JavaScript 前端开发 安全
什么事件必须要我王二狗来处理?
什么事件必须要我王二狗来处理?
200 0
什么事件必须要我王二狗来处理?
|
Web App开发 缓存 JavaScript
55、其他常见事件
beforeunload事件在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。
118 0
|
C#
C# 事件
C# 事件
89 0
C# 事件
|
前端开发
【氚云】表单前、后端各种事件触发动作详解
表单前、后端各种事件触发动作详解
933 0