Vue 3插槽变量无故为空

1wnzp6jl  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(306)

使用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”

w8f9ii69

w8f9ii691#

如果我在$slots上使用以下代码循环,它就可以工作:

<template v-for "keyName in Object.keys($slots)" :key="kayName">

但是在vue 2上,我记得当我打印$slot时,我可以看到里面的每个插槽。在vue 3上,我什么都看不到。

相关问题