uni-app|vue2/3|非setup中页面间传递数据(正|逆向|全局事件总线)

页面传递数据(正向，跳转前为传递，跳转后为接收)

跳转前页面html

<view>页面传递数据(正向)</view>
<button type="default" @click="goToDetail01">01-detail01 navgate</button>

跳转前页面js

<script>
export default {
   methods:{
    //方法一路由属性传参
    goToDetail01() {
        uni.navigateTo({
            url: '/pages/detail/detail?name=ningm&age=18'
        })
    },
    //方法二eventChannel传参
    goToDetail01() {
        uni.navigateTo({
            url: '/pages/detail/detail',
            success(res) {
                res.eventChannel.emit('acceptDataFormHomePage', {
                    data: '我是home页面传递给detail的数据'
                })
            }
        })
     }
   }
}
</script>

跳转后页面js

<script>
export default {
    //对应方法一options接收
    onLoad(options){
        console.log('在options接收home传递过来的数据:', options);
    },
    //对应方法二eventChannel接收
    onLoad(options) {
	const eventChannel = this.getOpenerEventChannel()
	eventChannel.on('acceptDataFormHomePage', (data) => {
            console.log('在options接收home页面eventChannel传递过来的数据:', data);
	})
    }
}
</script>

页面传递数据(逆向|全局事件总线，跳转前为接收，跳转后为传递)

跳转前页面html

<view>页面传递数据(逆向)</view>
<button type="default" @click="goToDetail02">02-detail02 navgate</button>

跳转前页面js

<script>
export default {
	// 方法二全局事件总线接收
    onLoad(){
        uni.$on('acceptDataFormDetail03', this.acceptDataFormDetail03)
    },
    onUnload(){
        uni.$off('acceptDataFormDetail03', this.acceptDataFormDetail03)
    },
   methods:{
// 方法一events接收
    goToDetail02() {
        uni.navigateTo({
            url: '/pages/detail/detail',
            events: {
                acceptDataFormDetail(data) {
                    console.log('接收到detail传递给home的数据', data);
                }
            }
        })
     },
    // 方法二全局事件总线接收
    //----------------
    goToDetail02() {
        uni.navigateTo({
            url: '/pages/detail/detail'
        })
    },
    acceptDataFormDetail03(value) {
        console.log('接收到detail传递给home的数据', value);
    }
    //-----------------
  }
}
</script>

跳转后页面html

<button type="default" @click="goBack">返回上一页</button>

跳转后页面js

<script>
export default {
   methods:{
    //对应方法一events传递
    goBack() {
        uni.navigateBack({
            delta: 1
        })
        // 触发事件,将detail的数据传递给home页
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('acceptDataFormDetail', {
            data: '这里是detail传递给home页的数据'
        })
    },
    // 对应方法二全局事件总线传递
    goBack() {
        uni.navigateBack({
            delta: 1
        })
        // 触发事件,通过全局事件总线将detail的数据传递给home页
        uni.$emit('acceptDataFormDetail03', {
            data: '这里是detail传递给home页的数据'
        })
    }
  }
}
</script>