uni-app icon indicating copy to clipboard operation
uni-app copied to clipboard

动态作用域插槽问题,<slot :name="xxx" params="xxx" > 报错

Open yaolong1 opened this issue 1 year ago • 2 comments

问题描述 微信小程序:动态作用域插槽问题(普通的动态插槽不报错)

复现步骤

  • 微信小程序设置 "scopedSlotsCompiler": "augmented",
  • filterBtnitem
<template>
	<view class="filter-content-item">
		<view class="filter-content-item-title" :style="titleStyle">
			<slot name="title">
				{{title}}
			</slot>
		</view>
		<view class="filter-content-item-box">
			<slot>
			</slot>
		</view>
	</view>
</template>
  • basicFilterBtn
<template>
	<filterBtnitem v-for="(item,index) of schemas" :key="index">
		<template #title>
			<slot :name="`${item.field}-title`">
				{{item.title}}
			</slot>
		</template>
		<template #default>
			<slot :name="item.field" :params="params">
			</slot>
		</template>
	</filterBtnitem>
</template>
<script setup>

const params = ref({})
const props = defineProps({
  schemas: {
	  type: Array,
	  required: true
  },
})
</script>
	<template>
	<basicFilterBtn :schemas="eqFilterSchemas" ref="Relf">
		<template #levelmarkId1-title>
			haha
		</template>
		<template #levelmarkId1={params}>
			xxxx {{params}}
		</template>
	</basicFilterBtn>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from '@vue/composition-api'
	import basicFilterBtn from '@/components/basic-filter-btn/index.vue'
	const Relf = ref(null);

	onMounted(() => {
		console.log(Relf.value)
	})

	const eqFilterSchemas = ref([{
		title: "部门1",
		field: 'levelmarkId1',
		defaultValue: '1'
	}, {
		title: "部门2",
		field: 'levelmarkId2',
		defaultValue: '2'
	}, {
		title: "部门3",
		field: 'levelmarkId3',
		defaultValue: '3'
	}])
</script>

预期结果 希望能够得到作用域插槽参数

实际结果 image

小程序编译结果 image

系统信息:

  • 发行平台: 微信小程序
  • 操作系统 Android 7.0
  • HBuilderX版本 3.8.4
  • uni-app版本 ^2.0.2-3070920230324001

补充信息 如果不是动态作用域插槽就不会报错如下

<template>
	<filterBtnitem v-for="(item,index) of schemas" :key="index">
		<template #title>
			<slot :name="`${item.field}-title`">
				{{item.title}}
			</slot>
		</template>
		<template #default>
			<slot :name="item.field">
			</slot>
		</template>
	</filterBtnitem>
</template>

yaolong1 avatar Jul 20 '23 07:07 yaolong1

vue版本是vue2 加了一个@vue/composition-api依赖

yaolong1 avatar Jul 20 '23 07:07 yaolong1

我也遇到了同样的问题

fwf123123 avatar Apr 03 '24 06:04 fwf123123