uni-app
uni-app copied to clipboard
动态作用域插槽问题,<slot :name="xxx" params="xxx" > 报错
问题描述 微信小程序:动态作用域插槽问题(普通的动态插槽不报错)
复现步骤
- 微信小程序设置 "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>
预期结果 希望能够得到作用域插槽参数
实际结果
小程序编译结果
系统信息:
- 发行平台: 微信小程序
- 操作系统 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>
vue版本是vue2 加了一个@vue/composition-api依赖
我也遇到了同样的问题