uniapp中使用navigateBack传参,应用场景:
通知发送,选择用户(机构),用户(机构)比较多,单独跳转新的页面进行选择后回传到通知发送的编辑页面
通知编辑页面
页面用的uview组件,具体使用请查看 uview官网,代码中略去的如附件等内容
选择机构使用u-input的select模式
<view class="form">
<u-form :model="dataTemp" ref="uForm" label-width="140" :error-type="errorType">
<u-form-item :required="true" label="标题" prop="title">
<u-input v-model="" type="text" :border="true" />
</u-form-item>
<u-form-item :required="true" label="接收机构" prop="receiveOrgIds">
<u-input type="select" :border="true" v-model="" placeholder="请选择接收机构" @click="selectOrg('org')"></u-input>
</u-form-item>
<u-form-item :required="true" label="内容" prop="content">
<u-input v-model="" type="textarea" height="150" :border="true" placeholder="请填写通知内容" />
</u-form-item>
</u-form>
</view>
<view class="bottombutton">
<u-button type="success" @click="handleSend" :loading="buttonLoading">发送</u-button>
</view>
js代码,点击时跳转机构选择页面
methods: {
gotoSelectOrg(type) {
uni.navigateTo({
url: '../selectOrg/selectOrg?type=' + type
})
}
}
通过uni.$on监听全局的自定义事件,来接收参数,
通过uni. $emit
触发
onShow() {
//selectedOrg为注册的方法名称,org为传回来的参数,回调函数调用()
uni.$on('selectedOrg', (org) => {
this.setSelectedOrg(org)
})
},
methods:{
setSelectedOrg(OrgList) {
//OrgList为选择页面传回的机构数组,根据业务逻辑自己处理
},
}
机构选择页面
<u-button type="primary" @click="selectedOrg">确定</u-button>
methods:{
selectedOrg(item) {
//触发页面的注册方法,注意,名称必须一致
uni.$emit('selectedOrg', this.selectedList)
uni.navigateBack({
delta: 1
})
}
}
注意事项
、 uni.
o
n
、
u
n
i
.
on 、 uni.
on、uni.once 、 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
2.使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.
o
n
注
册
监
听
,
o
n
U
n
l
o
a
d
里
边
u
n
i
.
on 注册监听,onUnload 里边 uni.
on注册监听,onUnload里边uni.off 移除,或者一次性的事件,直接使用 uni.$once 监听