uniapp如何纯粹且简单的跨路由传值？

Question

假设场景如下：

列表页（A）——》编辑页（B）——》人员选择器页面（C）

A有“编辑”按钮，点击后跳转到B，B页面上有两三个字段（全部多选），点击后都可以跳转到C，并且C默认选中B对应某个字段已具备的值，C页面点击“确认”后，B页面对应的字段更新为选中后的值。

一般说到“传值”，可能会马上想到 queryString、缓存、vuex 等，在这肿场景下，因为涉及到多选，很多时候id可能是GUID形式的，有隐患，所以只能选用后面两种方式了，后面两种方式不纯粹的地方在于需要为某一个字段设置一个中间变量，然后在 B、C 页面里面再合适的时机下去赋值、取值、清空等操作，然后这些代码可以算是无意义的，有没有一种方式可以想 vue 父子组件一样，通过props、$emit 的方式来传值取值呢？

最终处理方式：

列表页：

handleNav() {

    let _this = this
    _this.$Router.push({
        path: '/pages/components-pages/common/emp-selector-page/emp-selector-page',
        events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function(data) {
                
                
                // _this.assignhFormData.HandlerEmployee = data || []
            },
        },
        success: function(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('acceptDataFromOpenerPage', { 
                multiple: _this.multiple, 
                readonly: _this.readonly,
                list: _this.list || [], 
            })
        }
    })
}

目标页面（接受参数，点击确认，返回值）：

//接受参数
onLoad(e) {
    let _this = this
    const eventChannel = _this.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
        _this.multiple = data.multiple
        _this.readonly = data.readonly
        _this.list = JSON.parse(JSON.stringify(data.list))
    })
}

//返回值
methods: {
    handleConfirm() {
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.emit('acceptDataFromOpenedPage', JSON.parse(JSON.stringify(this.list)));
        this.back()
    },
}

Answer 1

看你具体的业务去需求。一般来说直接用 eventChannel 就可以覆盖你的 编辑页 和 人员选择页 的数据通讯了。

使用 props + $emit 的就真的比较冗余了，并不推荐。特别是平级路由的情况下，你的 props 就得现在 routerView 层了。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。