在一个完整的 uniapp 应用程序中,存在着多个页面组成的应用。有时候我们需要在不同的页面之间传递数据,这时候就要用到 uniapp 提供的跨页面传值方式 —— uni.$emit 和 uni.$on。
uni.$emit 和 uni.$on 是两个方法,它们分别代表了“触发事件”和“监听事件”的功能。在 uniapp 应用程序中,我们可以在某个页面(广义上的组件)中使用 uni.$emit 方法去触发一个事件,再在另一个页面(广义上的组件)中使用 uni.$on 方法来监听这个事件,从而获得从触发事件传递的数据。
使用 uni.$emit 和 uni.$on 有以下三个优点:
uni.$emit 方法主要用于触发事情、传递数据。在页面或组件内使用 uni.$emit 方法的代码形式为:
uni.$emit('eventName', data)
下面是一个示例,展示了如何在页面A中触发事件并传值,供页面B消费。
// PageA.vue
export default {
data() {
return {
message: 'message from PageA',
};
},
methods: {
sendMessage() {
uni.$emit('messageFromA', this.message);
},
},
};
这里,我们在 PageA 中定义了一个 message
变量,用于存放需要传递的数据。在 sendMessage
方法中使用了 uni.$emit
方法,并传递了事件名称 messageFromA
和要传递的数据 this.message
。
uni.$on 方法主要用于监听事件,实现接收被触发的事件和传递的数据。在页面或组件内使用 uni.$on 方法的代码形式为:
uni.$on('eventName', function(data) {
// 处理被触发事件并传递的数据
})
下面是一个示例,展示了如何在页面B中监听页面A触发的事件并获取传递的数据。
// PageB.vue
export default {
data() {
return {
message: '',
};
},
created() {
uni.$on('messageFromA', (data) => {
this.message = data;
console.log('message received from PageA: ' + this.message);
});
},
};
这里我们在 PageB 中使用 uni.$on
方法,监听事件 messageFromA
,当事件被触发时会打印接收到的数据。
uni.$emit 方法和 uni.$on 方法都需要在同一级组件中使用。如果它们被在不同的组件层次中使用,监听层层嵌套的情况,则会由于组件作用域的问题而无法触发和监听事件。
在使用 uni.$emit 方法时,需定义一个事件名称。在使用 uni.$on 方法来监听这个事件时,事件名称应与在 emit 方法时定义的事件名称一致,否则监听将失效。
uni.$on 方法必须在组件的生命周期函数中调用,创建组件时、mounted 时,或者在 watch 等方法中都是无法正常使用的。
本篇文章详细讲解了 uniapp 中使用 uni.$emit 和 uni.$on 实现跨页面传值的方法,提供了两个示例供读者参考,并总结了常见问题和注意事项。
使用 uni.$emit 和 uni.$on 时,需要记得它们必须在同一级组件中使用,使用相同的事件名称,并且 uni.$on 方法必须在组件的生命周期函数中调用。
本文链接:http://task.lmcjl.com/news/8524.html