[Vuejs]-Recursive usage of slots in vue3/typescript/sfc

by

3👍

✅

As I said in the comments, you code works perfectly fine (it renders). Error is from TS. My guess is it’s some minor typing problem in Vue (or maybe a limitation of TS)

I was able to get rid of the problem using dynamic slot names – more dynamic code makes it impossible to statically analyze the types, so TS stops complaining

TreeNode.vue

<script setup lang="ts">
const props = defineProps<{ item: Item }>();
</script>

<script lang="ts">
export type Item = {
  name: string;
  children?: Array<Item>;
};

const slotName = 'default';
</script>

<template>
  <div>
    <div>
      <slot :item="props.item" />
    </div>
    <div
      v-for="(child, index) in props.item.children"
      :key="index"
      style="margin-left: 10px"
    >
      <TreeNode :item="child">
        <template #[slotName]="{ item }: { item: Item }">
          <slot :item="item" />
        </template>
      </TreeNode>
    </div>
  </div>
</template>

Demo – just open another terminal and run npm run check

👤Michal Levý

1👍

No need to two slots the second one is enough without using default slot template, In the first slot you should render the content of the current node

<script setup lang="ts">
defineProps<{ item: Item }>()
</script>

<script lang="ts">
interface Item {
  name: string
  children: Array<Item>
}
</script>

<template>
  <div>
    <div>
      {{ item.name }}
    </div>
    <div v-for="(child, index) in item.children" :key="index" style="margin-left: 10px">
      <TreeNode :item="child">
        <slot :item="item" />
      </TreeNode>
    </div>
  </div>
</template>

LIVE DEMO

👤Boussadjra Brahim

0👍

I had an idea, and it worked.

<script setup lang="ts">
    const p = (item: any) => item
</script>
<template>
    ... Some vue template markup here
    <template v-if="$slots.actionCol" #actionCol="slotProps">
        <slot name="actionCol" v-bind="p(slotProps)" />
    </template>
</template>
👤MrDuDuDu

Leave a comment