程序化的事件侦听器
吾心信其可行，则移山填海之难，终有成功之日。——孙中山
我们可以使用this.$on在vue中侦听一个事件
vm.$on('test', function (msg) {
console.log(msg)
})然后我们可以在其他地方访问它
vm.$emit('test', 'hi')
// => "hi"例如这里，我在一个页面中使用vm.$on
image-20211115200015722
而在另一处中使用vm.$emit
image-20211115200524101
可以看到成功调用test事件
基于这一点，我们可以在uniapp中进行页面间的通信
也就是说，在其中一个页面中我们使用uni.on或者uni.once，在另一个页面中就可以使用uni.emit进行调用，前提是uni,on或者uni.
uni.$once触发后就会立马移除该监听器，也就是说只能触发一次
而uni.on就只能使用uni.off进行手动移除
比如我这里在index.nvue页面中挂载
image-20211115201214321
<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的效果
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读