Vue:槽数据可以回到父传递下来一个prop?

Question

我的父组件使用MyGrid组件并插入数据。在MyGrid中，我检查item类型，如果它是某种类型，我给它一个类typeSquare。
为了保持MyGrid"哑巴"，是否有一种方法我可以检查类型和然后让MyGrid通过类的道具?

父母

<MyGrid
:items="items"
columnGap="12"
rowGap="14"
>
<template v-slot="slotProps">
<Cover
v-if="slotProps.typename === 'NewOne'"
:project="slotProps.item.data"
/>
<Cover2 v-else-if="slotProps.typename != 'NewOne'" :project="slotProps.item.data"/>
</template>
</MyGrid>

---

MyGrid.vue

<template>
<div :class="$style.root">
<div :class="$style.gridContainer">
<template v-for="(item, index) in items">
<div
:key="index"
:class="[{ [$style.gridItem]: true }, { [$style.typeSquare]: item.typename === 'NewOne' }]"
:style="{
padding: `${columnGap}px ${rowGap}px`,
}"
>
<slot :item="item"></slot>
</div>
</template>
</div>
</div>
</template>

Answer 1

如果您的目标是只传递符合特定条件的项，则可以使用计算属性将它们过滤掉。在脚本中添加如下的计算对象

computed:{
filteredItems(){
return this.items.filter(item=>item.typename === 'NewOne')
}
},

之后在你的模板中你可以传递计算属性而不是整个列表

<MyGrid
:items="filteredItems"
columnGap="12"
rowGap="14"
>