吾心信其可行,则移山填海之难,终有成功之日。——孙中山
我们可以使用this.$on
在vue
中侦听一个事件
vm.$on('test', function (msg) {
console.log(msg)
})
然后我们可以在其他地方访问它
vm.$emit('test', 'hi')
// => "hi"
例如这里,我在一个页面中使用vm.$on
而在另一处中使用vm.$emit
可以看到成功调用test
事件
基于这一点,我们可以在uniapp
中进行页面间的通信
也就是说,在其中一个页面中我们使用uni.once,在另一个页面中就可以使用uni.on或者uni.
uni.$once
触发后就会立马移除该监听器,也就是说只能触发一次
而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的效果
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有