uni-app组件间通信的三种方式

uni-app组件间通信的三种方式

基于opstion语法

url

上级页面

preserveRevise(){
	uni.navigateTo({
		url:'/pages/addressMange/addressMange?id=1'
    })
}

下级页面

onLoad(e){
	console.log(e.id);
}

url传参的优点是：取值方便可以跨域，缺点是：取值长度有限制，长度过大时会被截取掉

eventChannel

方式一

下级传上级

下级传递数据

goBackHome() {
    uni.navigateBack({
        delta: 1
    })
    //跳转成功以后传递一个事件
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit('acceptDataFormDetail02', {
        data: '将detail02页面的数据传递给Home页面'
    })
}

上级接收数据

goToDetail05() {
    uni.navigateTo({
        url: "/pages/detail02/detail02?name=liujun&id=400",
        events: {
            acceptDataFormDetail02(data) {
                console.log("home page 拿到detail02传递过来的数据:", data);
            }
        }
    })
}

方式二

上级传下级

上级传递数据

	goToDetail04() {
        uni.navigateTo({
            url: "/pages/detail01/detail01?name=liujun&id=200",
            success(res) {
                // 通过eventChannel向被打开页面传送数据
                res.eventChannel.emit('acceptDataFormHomePage', { 
                    data: '我是从Home Page 传递过来的数据' ,
                })
            }
        })
    },

下级接收数据

onLoad(options) {
    console.log("接受到url的参数:", options);
     const eventChannel = this.getOpenerEventChannel();
     eventChannel.on('acceptDataFormHomePage', (data) => {
         console.log("接受到eventChannel的参数", data);
     })
}

Storage

上级页面（对需要传递的数据进行数据缓存）

注意：缓存的数据必须为字符串形式，对象或数组需要先进行转换

let item = JSON.stringify(this.userInfo[e])
uni.setStorageSync('userInfo',item)

下级页面（对缓存的数据进行取出并且进行销毁）

onLoad() {
	console.log("进入了编辑地址页面");
	var data = uni.getStorageSync('userInfo')//取出缓存数据
	var res = JSON.parse(data)
	this.userInfo = res
	uni.removeStorageSync('userInfo')
	var data = uni.getStorageSync('userInfo')//销毁缓存数据
	console.log(data);
}

uni.KaTeX parse error: Expected 'EOF', got '&' at position 9: emit ** &̲ **uni.on

这种传递数据的方式必须要 先监听 要不然无效

传递数据的页面进行派生事件

uni.$emit('addUserInfo',this.userInfo)

接收数据的页面在onLoad中进行监听

uni.$on('addUserInfo',res=>{
        console.log(res);
    })

注意：uni.$emit和uni.$on属于全局跨页面传参，在接收值页面要在onUnload周期添加移除监听时间。

onUnload() {
    uni.$off('addUserInfo')
}

基于composition语法

由于在composition语法中无法通过this获取到vue实例所以操作上有个别不同

url传递数据的方式不变

接收数据的方式有一点不同–从 @dcloudio/uni-app 引入 onLoad 生命周期

import { onLoad } from '@dcloudio/uni-app'

onLoad((options) => {
    console.log('接受到home传递过来url的数据:', options);
})

eventchannel

方式一

下级传上级

需要提前获取到vue实例再从vue实例上获取到eventChannel

import {
    getCurrentInstance,
    ref
} from 'vue'
const $instance = ref(getCurrentInstance().proxy) // this 

function goBack() {
	uni.navigateBack({
		delta: 1
	})
	const eventChannel = $instance.value.getOpenerEventChannel()
	// 触发事件, 将detail02的数据传递给Home页面
	eventChannel.emit('acceptDataFormDetail02', {
		data: '这里是detail02传递给Home页面的数据'
	})
}

上级接收

function goToDetail02() {
    uni.navigateTo({
        url: '/pages/detail02/detail02?name=liujun&id=200',
        events: {
            acceptDataFormDetail02(value) {
                console.log('接收到detail02传递过来的数据', value);
            }
        }
    })
}

方式二

上级传下级

上级传递数据

function goToDetail01() {
    console.log('goToDetail01');
    uni.navigateTo({
        url: '/pages/detail01/detail01?name=liujun&id=100',
        success(res) {
            //跳转成功以后派发一个事件
            res.eventChannel.emit('acceptDataFormHomePage', {
                data: '我是home页面传递给detail01的数据'
            })
        },
    })
}

下级接收数据

onLoad((options) => {
    //在下级页面中的onLoad生命周期中进行监听派生的事件
    // const eventChannel = this.getOpenerEventChannel();
    const eventChannel = $instance.value.getOpenerEventChannel();
    eventChannel.on('acceptDataFormHomePage', (value) => {
        console.log('接收到home页面eventchannel传递过来的数据:', value);
    })

})

uni.KaTeX parse error: Expected 'EOF', got '&' at position 9: emit ** &̲ **uni.on

function goBack() {
    uni.navigateBack({
        delta: 1
    })

    // 触发事件( 通过事件总线 )
    uni.$emit('acceptDataFormDetail03', {
        data: '这里的数据是从detail03传递到home页面'
    })
}

接收数据

onLoad(() => {
    uni.$on('acceptDataFormDetail03', acceptDataFormDetail03)
})
onUnload(() => {
    uni.$off('acceptDataFormDetail03', acceptDataFormDetail03)
})