uniapp 使用 $emit和$on——$on中无法为data中的变量赋值

问题在于this的指向,

解决办法是使用变量保存$on,其次再为data中的值赋值

以下是具体代码:

1、html代码:

c 复制代码
			<view class="form_picker" @click="selePositionFun()">
				<view class="">
					<input placeholder="请选择职位类别" :disabled="true" v-if="positionOne == ''" />
					<view class="" v-else>{{positionOne}}-{{positionTwo}}</view>
				</view>
			</view>

2、 js代码:

①传递对象:
c 复制代码
A页面传递:(使用.$emit)
	let newarr = {
		one:this.leftList[this.tabindex].type,   //一级名称
		two:this.selectList[0]                   //二级名称
	}
	uni.$emit('positionOne',newarr)
	uni.navigateBack()

B页面接收:(使用.$on)
	onShow() {
		//接收上个页面传递的职位类别
		const on = uni.$on('positionOne', function (data) {
		 console.log('打印data', Object.values(data))    // ["销售", "广告销售"]
			var list = Object.values(data)   //使用Object.values 将对象转换为数组
			this.positionOne = list[0]
			this.positionTwo = list[1]
		})
		//再次赋值
		this.positionOne = on.positionOne
		this.positionTwo = on.positionTwo
			
		console.log('打印111', this.positionOne)   //销售 
		console.log('打印222', this.positionTwo)   //广告销售
	},
②传递数组:
c 复制代码
A页面传递:(使用.$emit)
	uni.$emit('selectList', this.selectList)   //传递选中的数组
	uni.navigateBack()

B页面接收:(使用.$on)
	onShow() {
		//接收上个页面传递的职位类别
		const on = uni.$on('selectList', function(data) {
			// console.log('打印收到的类型',typeof(data))  //object
			this.positionTwo = data.toString() //转为字符串使用
		})
		this.positionTwo = on.positionTwo
		console.log('打印positionTwo', this.positionTwo)   //销售, 广告销售
	},

完成~

相关推荐
zttbee5 小时前
echarts图表tooltip色块失效
前端·javascript·echarts
H.莓飛6 小时前
【数据结构】排序_OJ题(一):计数、桶与排序后的处理
java·开发语言·数据结构
wangchunyu1147 小时前
JAVA AQS与Lock实现原理(含CAS)
java·开发语言·word
虚无境7 小时前
如何用AI帮我写出实用的插件
前端·javascript·ai编程
爱喝水的鱼丶8 小时前
SAP-ABAP:ECC→S/4HANA ABAP 迁移升级指南——程序改造、语法兼容与性能优化 导语
运维·开发语言·性能优化·sap·abap·经验交流·开发交流
小灰灰搞电子8 小时前
Rust+Slint 实现FTP客户端调试助手源码分享
开发语言·后端·rust
外收内放8 小时前
面向对象高级(实战案例)
开发语言·python·学习
zimoyin9 小时前
在 C# 里嵌入 JavaScript:用 Jint 做可热更新的自动化脚本(从入门到踩坑)
javascript·c#·自动化
fanruitian9 小时前
python else用法
开发语言·python
FRing039 小时前
JavaScript入门到精通二十六(变量提升、函数剩余参数、展开运算符、ES6箭头函数)
开发语言·前端·javascript·es6·箭头函数