使用setup语法,我在一周前开始了一个新项目,当我试图在模板中使用“slots”或者甚至是用useSlots计算时,slots变量总是空的,即使v-slots工作得很好(像我想要的那样传递数据)。
<DatatableGeneric
title="Liste de clients (API)"
:headers="headers"
:data="apiResponse.results"
:loading="loading"
:serverItemsLength="apiResponse.count"
v-model:options="tableOptions"
@selected="updateSelected"
:show-select="showSelect"
sort-by="name"
sort-desc
must-sort
>
<template v-slot:test> TEST </template>
<template v-slot:item-actions="{ item }">
<slot name="item-actions" :item="item"></slot>
</template>
</DatatableGeneric>
在这段代码中,你可以看到我有两个命名的插槽,“test”和“item-actions”。
子组件:
slots? you here? {{ slots}}
slots? still not here? {{ testSlots }}
<slot name="test"> aaaaa </slot>
<tbody>
<tr v-for="item in computePaginatedData" :key="item.name">
<td
v-if="showSelect"
class="d-flex justify-center items-center align-center"
style="width: 100%"
>
<v-checkbox
:value="item"
color="primary"
v-model="computeSelected"
hide-details
class="align-center justify-center"
/>
</td>
<td v-for="header in headers" :key="header.value">
<slot :name="`item-${header.value}`" :item="item">
{{ get(item, header.value) }}
</slot>
</td>
</tr>
</tbody>
....
<script setup lang="ts">
import { ref, computed, reactive, onMounted, watch } from 'vue'
import { useSlots } from 'vue'
const slots = useSlots()
const testSlots = computed(() => {
return slots
})
.....
在项目中,我看到:老虎机?你在吗?{}老虎机?还不在吗?{}
项目中有问题,但可以肯定的是,这与我的代码无关,因为插槽工作正常,只是没有列在插槽变量中。
还尝试在模板中使用“$slots”
1条答案
按热度按时间w8f9ii691#
如果我在$slots上使用以下代码循环,它就可以工作:
但是在vue 2上,我记得当我打印$slot时,我可以看到里面的每个插槽。在vue 3上,我什么都看不到。