uniapp中使用navigateBack和uni.$on进行页面通讯传参

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="dataTemp.title" type="text" :border="true" />
				</u-form-item>
				<u-form-item :required="true" label="接收机构" prop="receiveOrgIds">
					<u-input type="select" :border="true" v-model="dataTemp.receiveOrgNames" placeholder="请选择接收机构" @click="selectOrg('org')"></u-input>
				</u-form-item>
				<u-form-item :required="true" label="内容" prop="content">
					<u-input v-model="dataTemp.content" 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为传回来的参数,回调函数调用this.setSelectedOrg()
			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
					})
					
				}
		}

注意事项

1.uni.emit、 uni. o n 、 u n i . on 、 uni. onuni.once 、uni.off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
2.使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni. o n 注 册 监 听 , o n U n l o a d 里 边 u n i . on 注册监听,onUnload 里边 uni. ononUnloaduni.off 移除,或者一次性的事件,直接使用 uni.$once 监听

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值