Question

无法在 Vue 3 中循环遍历 $slots 对象以将所有插槽从父级传递到子级

2022-02-09

11899

javascript vue.js vuejs3 quasar-framework vuejs-slots

我无法通过VUE 3中的$插槽对象循环以使所有插槽从父母到孩子，$插槽对象在子组件中似乎是空的。

我如何通过$插槽循环对象将所有父插槽传递给子零件？

我在运行代码时会遇到此错误： TypeError：无法读取Null的属性（读取'键'）

这是关于我的沙盒问题，您可以取消第5行以查看完整的结果： bush-g7c9h？file =/src/pages/index.vue

github示例： https://github.com/firibz/vue3slots > 376166267

儿童：

136270666

Answer 1

您必须使用 Object.keys($slots) 才能在 v-for 上使用插槽。

<q-input v-model="componentValue" v-bind="$attrs" style="width: 250px">
  <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
    <slot :name="slot"></slot>
  </template>
</q-input>

Answer 2

为防止模板中出现 TypeScript 错误，您可以在设置中获取并转换插槽名称。

理想情况下，您可以获取实际类型，而不仅仅是转换为“默认”

<template
  v-for="(slot, index) of slotNames"
  :key="index"
  #[slot]
>
  <slot :name="slot" />
</template>

<script lang="ts" setup>
import { useSlots } from "vue";


const slots = useSlots();

// Assert type here to prevent errors in template
const slotNames = Object.keys(slots) as "default"[];

</script>

Answer 3

以下是使用 Vuetify Playground 的示例演示 Vue 3 动态插槽/模板传递：

<template #[name] v-for="slot, name in $slots">
      <slot :name="name"></slot>
    </template>