【组件传参】返回e和传入的参数 - uniapp中this.$emit回传多个值 - uniapp组件中带事件参数event和多个参数

最新推荐文章于 2024-08-29 09:36:21 发布

Rudon滨海渔村

最新推荐文章于 2024-08-29 09:36:21 发布

阅读量1.6k

点赞数 3

分类专栏：开发 Web前端文章标签： uni-app

本文链接：https://blog.csdn.net/qq285744011/article/details/126707376

版权

开发同时被 2 个专栏收录

236 篇文章 12 订阅

订阅专栏

Web前端

109 篇文章 9 订阅

订阅专栏

效果

现在

组件 @change="change($event, item)"

change(e, obj) {
console.log("e:", JSON.stringify(e))
console.log("obj:", JSON.stringify(obj))
}

可以同时捕捉到：

e: "basketball"
obj: {"name":"蔡先生","uid":"008"}

以前

默认传参@change="xxx(obj)" 可以传对象参数，但是默认的e事件对象无法获取；

或者不传参@change="xxx" 可以传回点击e事件，但无法传当前行的行信息

完整代码

<template>
	<view class="padding30 ">
		
		<view v-for="(item, index) in students" :key="index">
			<view class="fontSize30 paddingTop50">
				用户: {{item.name}}
			</view>
			<uni-data-select label="爱好" :clear="false" :localdata="range" @change="change($event, item)"></uni-data-select>
			<!-- v-model="value" -->
		</view>

	</view>
</template>

<script>
	export default {
		methods: {
			change(e, obj) {
				console.log("e:", JSON.stringify(e))
				console.log("obj:", JSON.stringify(obj))
			},
		},
		data() {
			return {
				students: [{
						name: '蔡先生',
						uid: '008'
					},
					{
						name: '周某',
						uid: '009'
					}
				],

				range: [{
						value: 'basketball',
						text: "篮球"
					},
					{
						value: 'football',
						text: "足球"
					},
					{
						value: 'ride-a-bike',
						text: "骑单车"
					},
				],

			};
		},
		
	};
</script>

<style>

</style>

封面