最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to use nested named slots in Vue.js? - Stack Overflow

programmeradmin2浏览0评论

It's been a while since I posted a question here. People of StackOverflow, I need your help.

layouts/page.vue

<template>
  <main class="flex py-10 w-full">
    <AppNavigation />

    <section class="basis-3/4">
      <slot />
    </section>

    <slot name="table-of-contnets" />
  </main>
</template>

pages/docs.vue

<script lang="ts" setup>
definePageMeta({
  layout: 'page',
})
</script>

<template>
  <ContentDoc v-slot="{ doc }">
    <aside class="relative basis-1/4">
      <nav class="fixed top-5 right-10 space-y-4">
        <p class="font-serif text-lg">
          On this page:
        </p>

        <AppTableOfContents
          v-if="doc.body?.toc"
          :toc="doc.body.toc.links"
        />
      </nav>
    </aside>

    <ContentRenderer
      class="space-y-4"
      :value="doc"
    />
  </ContentDoc>
</template>

I've been looking for ways to insert the <aside> into the table-of-contents slot but have been experiencing issues with the named slots of <ContentDoc /> taking precedence over the ones of the layout.

I'd appreciate it if you could help me

发布评论

评论列表(0)

  1. 暂无评论