Loading [MathJax]/jax/output/CommonHTML/fonts/TeX/AMS-Regular.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >程序化的事件侦听器

程序化的事件侦听器

作者头像
阿超
发布于 2022-08-17 13:28:02
发布于 2022-08-17 13:28:02
1.4K00
代码可运行
举报
文章被收录于专栏:快乐阿超快乐阿超
运行总次数:0
代码可运行

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
vm.$on('test', function (msg) {
  console.log(msg)
})

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
vm.$emit('test', 'hi')
// => "hi"

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

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

可以看到成功调用test事件

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

uniapp官方文档

也就是说,在其中一个页面中我们使用uni.once,在另一个页面中就可以使用uni.on或者uni.

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

而uni.off进行手动移除

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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页面中调用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
	<view>
	</view>
</template>

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-11-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uniapp页面间通信相关方法总结
uni-app 是一个使用 vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
前端达人
2021/06/16
4.6K0
uni-app实战之路-组件传值
$on使用文档 这里趁着这个组件传值的机会,将这个也写一下吧。在index.vue文件的onLoad里面注册一个全局订阅的事件
何处锦绣不灰堆
2020/05/28
1.4K0
uniapp播放音频
https://uniapp.dcloud.io/api/media/audio-context
阿超
2022/08/17
1.5K0
【UniApp】-uni-app-数据传递补充
创建一个全新的项目(先来看 Vue2 版本的,所以在创建项目的时候选择 Vue2):
程序员NEO
2023/12/16
2730
【UniApp】-uni-app-数据传递补充
uniapp基础学习保姆式教程
如果是刚入门小程序的,又或者刚听到这个名词的人,可能跟我之前一样,带着诸多的疑惑。比如:
bug开发工程师007
2023/09/24
8352
如何高效的阅读uni-app框架?(建议收藏)
uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打印,定时器,生命周期,页面,页面通讯。
达达前端
2019/11/27
1.5K0
uni-app小程序开发-页面跳转及传值
示例:uni.redirectTo({ url: '/pages/login/login' })
码客说
2024/07/04
5380
石桥码农:20 vue计算属性和侦听器
在template里的插值表达式,如果太长,会让模板代码变得难于维护;如果有多处用到了同样的插值表达式,也不便于复用和修改。例如,这样的一个插值表达式:
LIYI
2020/02/13
7020
石桥码农:20 vue计算属性和侦听器
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
本文先介绍了搜索结果页开发,包括搜索类型的传递、占位符设置和搜索功能实现; 再介绍了帖子详情页的开发,包括页面配置和通信、公共列表组件优化、关注顶踩功能完善、帖子内容和图片展示、评论输入框组件开发和封装、评论列表组件和分享功能组件开发等。
cutercorley
2021/02/04
2.5K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
前端常考vue面试题(必备)_2023-03-15
computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。
yyds2026
2023/03/15
1.1K0
『UniApp』核心语法
下载地址:https://www.dcloud.io/hbuilderx.html
程序员NEO
2023/12/26
5792
『UniApp』核心语法
腾讯前端一面常考vue面试题汇总2
vue构建函数调用_init方法,但我们发现本文件中并没有此方法,但仔细可以看到文件下方定定义了很多初始化方法
bb_xiaxia1998
2023/01/04
6840
【有问必答】搭建uniapp项目流程手把手教学
前段时间,博友加本狗微信,询问uniapp的学习方法。本狗资历浅薄,没有专门学过uniapp,只能将自己日常开发uniapp的基本流程和步骤进行分享,希望可以略尽绵薄之力。感谢如下图所示的博友朋友的询问支持,大家的支持才是我进步的动力。
JavaDog程序狗
2024/10/07
2310
【有问必答】搭建uniapp项目流程手把手教学
一面高频vue面试题
eventBus事件总线适用于父子组件、非父子组件等之间的通信,使用步骤如下: (1)创建事件中心管理组件之间的通信
bb_xiaxia1998
2022/10/28
8340
uni-app实战教程-----H5移动app以及小程序(三)---页面跳转以及底部选项
新建页面 右键你的项目 点击新建页面 自己命名即可 这里为mine 建好后在 pages.json能看到 已被自动添加页面 底部选项卡 官方文档地址 https://uniapp.dclou
代码哈士奇
2021/01/29
1.5K0
uni-app实战教程-----H5移动app以及小程序(五)---再次开发前端
将index.vue中的goTest() 复制到 apiuse中并改成delImg 如下
代码哈士奇
2021/02/04
7670
uni-app实战教程-----H5移动app以及小程序(五)---再次开发前端
UniApp 的页面结构是怎样的?
UniApp 是一种使用 Vue.js 开发跨平台应用的框架,其页面结构遵循 Vue 组件的设计理念。以下是 UniApp 页面结构的详细介绍,包括文件结构、组件组成、样式、数据绑定以及生命周期等内容。
王小婷
2025/05/25
860
语法速通 uni-app随笔【uni-app】【微信小程序】【vue】
pages目录/index目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】
来杯Sherry
2023/05/25
4980
语法速通 uni-app随笔【uni-app】【微信小程序】【vue】
认识WebStorm-小程序框架wepy
WebStorm是一个功能强大的IDE,适用于JavaScript开发,适合使用Node.js进行复杂的客户端开发和服务器端开发。
达达前端
2019/07/03
1.8K0
认识WebStorm-小程序框架wepy
京东前端二面必会vue面试题(持续更新中)_2023-02-24
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。
用户10377014
2023/02/24
9000
相关推荐
uniapp页面间通信相关方法总结
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验