喜茗
喜茗
  • 发布:2019-10-12 12:38
  • 更新:2019-10-15 22:49
  • 阅读:1070

【报Bug】自定义模式下,页面引用组件,事件回调的箭头函数无法引用页面数据

分类:uni-app

详细问题描述

在macOS 10.15下,使用HbuilderX-2.3.1运行uni-app项目到微信小程序(自定义组件模式);
组件A内定义单个slot,页面B引用组件A时,使用v-for遍历页面数组,渲染数组内数据没问题,但是在事件回调里,使用箭头函数引用数据时报undefined; 切换到template模式就可以

重现步骤

[步骤]

[结果]

[期望]

打印对应的数据

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

HBuilderX-2.3.1

[mac版本号]

macOS 10.15

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

微信小程序(自定义组件模式)

[运行端版本号]

1.02.1910112

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[可重现代码片段]

定义的组件

<template>  
	<view class="box">  
		<slot />  
	</view>  
</template>  
  
<script>  
</script>  
  
<style lang="less">  
	.box{  
		padding: 10upx;  
		background: rgba(0,0,0,.2);  
	}  
</style>  

页面引用组件

<template>  
	<view class="content">  
		<abc>  
			<view>  
				<view v-for="(item, i) in list" :key="i">  
					<view class="item" @click="(e) => getItem(item, e)">{{item.key}}</view>  
				</view>  
			</view>  
		</abc>  
	</view>  
</template>  
  
<script>  
	import abc from '../../components/abc/abc.vue';  
	  
	export default {  
		components: {  
			abc  
		},  
		data() {  
			return {  
				list: [{key: 1}, {key: 2}, {key: 3}]  
			}  
		},  
		methods: {  
			getItem(item, e){  
				console.log(item)  
			}  
		}  
	}  
</script>  
  
<style>  
	.content {  
		padding: 20upx;  
	}  
	.item{  
		margin-bottom: 40upx;  
		margin-top: 40upx;  
		padding: 0 30upx;  
		color: #333;  
		font-size: 28upx;  
		background: #eee;  
	}  
</style>  

联系方式

[QQ]

2019-10-12 12:38 负责人:无 分享
已邀请:
vishun

vishun

确实不支持箭头函数,但测试可以用这种方式传递:@click=" getItem(item, $event)"

  • 喜茗 (作者)

    好的,谢谢


    2019-10-26 22:18

c***@163.com

c***@163.com

@click=" getItem(item, e)"

  • 喜茗 (作者)

    感谢,我没有表述清楚,我是需要传递两个参数,一个是event对象,一个是渲染的对象。。。


    2019-10-12 16:11

该问题目前已经被锁定, 无法添加新回复