一、需求是这样的：
现在需要点击首页循环出来的列表中其中一项，点击后我们要让他带着参数跳转到另外一个页面。因为列表中的数据都是用v-for循环出来的，所以点击每项传递的参数都是不同的。
1、用uni.navigateTo中的url拼接传参
此时假设我们用到的页面跳转方式是uni.navigateTo，如果要带参数跳转，那么可以在url的后面拼接上我们需要的参数就行，如下面代码段所示
//在首页传递参数
uni.navigateTo({
url: `/subPackages/foodsafety/safetyTrainRules?id=${id}`,
animationType: 'pop-in',
animationDuration: 300
});//在跳转页面接收参数
onLoad(data){
console.log(data)
}但是现在的传参仅限于比较短的参数，太长的参数用拼接的方法会传递失败，因为这种方法有长度限制。
所以假如现在我们需要传递一个很长的富文本参数就不能再使用上面的这个方法了，需要采取另外一个方法：
2、长参数或者对象等用uni.$emit()和uni.$on()传递参数
uni.$emit('data',data)
uni.$on('data',function(data){})uni.$emit和uni.$on都是uniapp官方提供的api，可以用来跨页面、跨组件通讯
这次想记录也就是因为在这里碰到了坑！原本我以为只要按着这个顺序用下来就好了，在首页用$emit传参数，在跳转的页面用$on接收参数就行了，结果就是我天真了
-
首先碰到的第一个问题，是关于在uni.$on()中的回调函数的指向问题，如果这样写（在文中跳转的页面就是接收参数的页面）
//跳转的页面中 export default { data() { return { content: '' } }, onLoad(){ uni.$on('data',function(data){ console.log(this.content) //undefined }) } }在控制台中会打印undefined,这是因为此时this的指向不对
解决办法(1): 改成箭头函数以后就就能解决了//跳转的页面中 export default { data() { return { content: '1' } }, onLoad(){ uni.$on('data'，(data)=>{ console.log(this.content) //1 }) } }
解决办法(2):
既然知道是this指向问题，那就把我们需要的this给“请”进去就好了//跳转的页面中 export default { data() { return { content: '1' } }, onLoad(){ let that = this uni.$on('data'，function(data){ console.log(that.content) //1 }) } } -
第二个问题就是$emit和$on定义顺序问题
在用$emit携带参数跨页面时,在跳转的页面里面发现第一次进入的时候并没有触发uni.$on（看控制台打印得知，第一次进入的时候不打印，回退到原来的页面后再次点击进入跳转页面打印），这就是因为uni.$on还没有定义完成，因此也就没有接收到$emit传递的数据（之前都没有打开过的页面怎么可能定义好啊喂！），下面提供两种解决方法
第一次跳转不生效写法//首页 uni.$emit('richtext', content)//跳转页面 uni.$on('richtext', (data) => { console.log(data); })
解决办法(1):嵌套写法文章来源：https://www.toymoban.com/news/detail-632050.html
//在首页中
uni.$on('richtext1', function() {
uni.$emit('richtext', content)
})
//在要跳转入的页面中
uni.$on('richtext', (data) => {
console.log(data);
})
uni.$emit('richtext1')解决办法(2)：用定时器延迟$emit的使用文章来源地址https://www.toymoban.com/news/detail-632050.html
//首页
setTimeout(()=>{
uni.$emit('richtext', content)
},300)//跳转页面
uni.$on('richtext', (data) => {
console.log(data);
})总之有遇到这个问题的一般是用的navigateTo带参数去跳转页面，后面稍微查了一下有两个跳转是可以正常用$emit和$on去传值的，不会出这么多幺蛾子 1.uni.switchTab， 2.uni.navigateBack
上文这些方法都是自己有试过的，心得就是this指向还是得多加理解 最后就是一定要记得在离开页面后移除监听事件！！
//跳转的页面中
onUnload() {
uni.$off('data')
},到了这里，关于uniapp在不同页面间跳转时使用$emit和$on传值无效问题（记录坑）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
