前言
开发微信小程序，页面与页面之间少不了数据通信，一起来看看有哪些方法。
以下是本篇文章正文内容，下面案例可供参考
一、跳转路径?拼接参数
适合数据量小的情况，如数据量大的情况不建议此方式。注意：如传递了number类型数据，接收回来的数据会转换成string类型
/** A.vue **/
<script>
methods: {
goRouter(){
uni.navigateTo({
url: `/pages/index/test?data=123&title=A页面&source=1`
})
}
}
</script>
/** B.vue **/
<script>
onLoad(option) {
console.log(option) // {data: "123", title: "A页面"，source: "1"}
}
</script>
二、通过eventChannel事件进行通信
适合数据量大的情况。注意：此类方法如果不通过A页面直接跳转B页面会报错
/** A.vue **/
<script>
methods: {
goRouter(){
uni.navigateTo({
url: `/pages/index/test`,
success: function(res) {
res.eventChannel.emit('pageData', {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"})
}
})
}
}
</script>
/** B.vue **/
<script>
onLoad(option) {
const eventChannel = this.getOpenerEventChannel();
// eventChannel.on监听，获取上一页面通过eventChannel事件传送的数据
eventChannel.on('pageData', data=> {
console.log(data) // {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"}
})
}
</script>
三、通过缓存方式传递数据（不推荐）
此类方法虽简单适用所有页面，但一般不推荐使用该方法。
/** A.vue **/
<script>
methods: {
goRouter(){
uni.setStorageSync('pageData', {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"})
uni.navigateTo({
url: `/pages/index/test`
})
}
}
</script>
/** B.vue **/
<script>
onLoad() {
const data = uni.getStorageSync('pageData');
console.log(data) // {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"}
}
</script>
四、Vuex全局通信
/** A.vue **/
<script>
import {
mapMutations
} from 'vuex';
methods: {
...mapMutations(['setDataInfo']),
goRouter(){
this.setDataInfo({data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"})
uni.navigateTo({
url: `/pages/index/test`
})
}
}
</script>
/** B.vue **/
<script>
import {
mapState
} from 'vuex';
onLoad() {
console.log(this.pageData); // {data: 123, title: "A页面"，source: 1, content: "点个赞点个赞，求求了"}
},
computed: {
...mapState({
pageData: state => state.page.pageInfo
})
},
</script>
五、globalData
/** App.vue **/
<script>
globalData: {
data: 123,
title: "A页面",
source: 1,
content: "点个赞点个赞，求求了"
}
</script>
/** B.vue **/
<script>
onLoad() {
console.log(this.globalData.data) // 123
console.log(this.globalData.title) // "A页面"
console.log(this.globalData.source) // 1
console.log(this.globalData.content) // "点个赞点个赞，求求了"
}
</script>
六、子页面向父页面传递数据
通过uni.$emit事件订阅传递数据，uni.$on监听接收数据。
/** B.vue **/
<script>
methods: {
back() {
uni.$emit('pageData', {data: 123, title: "B页面"，source: 1, content: "点个赞点个赞，求求了"});
uni.navigateBack({
delta: 1
});
}
}
</script>
/** A.vue **/
<script>
onLoad() {
uni.$on('pageData', data => {
console.log(data) // {data: 123, title: "B页面"，source: 1, content: "点个赞点个赞，求求了"}
})
}
</script>
总结
本文简单介绍了微信小程序页面之间数据通信，若有其他更好的通信方式，欢迎评论区补充。
标签：uniapp,vue,title,微信,source,123,data,页面 From： https://blog.csdn.net/Rocky_Time/article/details/139245927