阿超 > 程序化的事件侦听器

程序化的事件侦听器

2021-11-15

前端

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

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

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

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

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

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

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

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

image-20211115200015722

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

image-20211115200524101

可以看到成功调用test事件

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

uniapp官方文档

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

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

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

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

image-20211115201214321

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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页面中调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
	<view>
	</view>
</template>

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

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