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

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

跳转前页面html

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

跳转前页面js

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

跳转后页面js

<script setup>
    //对应方法一options接收
    import { onLoad } from '@dcloudio/uni-app'
    onLoad((options) => {
	console.log('在options接收home传递过来的数据:', options);
    })
    // 对应方法一props接收
    const props = defineProps({
	name: String,
	age: Number
    })
    console.log('在props接收home传递过来的数据:', props.name, props.age);
    //对应方法二eventChannel接收
    import { ref,getCurrentInstance } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
    // $instance => this
    const $instance = ref(getCurrentInstance().proxy)
    onLoad((options) => {
	const eventChannel = $instance.value.getOpenerEventChannel()
	eventChannel.on('acceptDataFormHomePage', (value) => {
                console.log('在options接收home页面eventChannel传递过来的数据:', value);
	})
    })
</script>

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

跳转前页面html

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

跳转前页面js

<script setup>
// 方法一events接收
    function goToDetail02() {
        uni.navigateTo({
            url: '/pages/detail/detail',
            events: {
                acceptDataFormDetail(value) {
                    console.log('接收到detail传递给home的数据', value);
                }
            }
        })
     }
// 方法二全局事件总线接收
    import { onLoad, onUnload } from '@dcloudio/uni-app'
    onLoad(() => {
        uni.$on('acceptDataFormDetail03', acceptDataFormDetail03)
    })
    onUnload(() => {
        uni.$off('acceptDataFormDetail03', acceptDataFormDetail03)
    })
    function acceptDataFormDetail03(value) {
        console.log('接收到detail传递给home的数据', value);
    }
    function goToDetail02() {
        uni.navigateTo({
            url: '/pages/detail/detail'
        })
    }
</script>

跳转后页面html

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

跳转后页面js

<script setup>
    //对应方法一events传递
    import { ref,getCurrentInstance } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
    // $instance => this
    const $instance = ref(getCurrentInstance().proxy)
    function goBack() {
        uni.navigateBack({
            delta: 1
        })
        // 触发事件,将detail的数据传递给home页
        const eventChannel = $instance.value.getOpenerEventChannel()
        eventChannel.emit('acceptDataFormDetail', {
            data: '这里是detail传递给home页的数据'
        })
    }
    // 对应方法二全局事件总线传递
    function goBack() {
        uni.navigateBack({
            delta: 1
        })
        // 触发事件,通过全局事件总线将detail的数据传递给home页
        uni.$emit('acceptDataFormDetail03', {
            data: '这里是detail传递给home页的数据'
        })
    }
</script>