Vue.js 插槽未在响应式布局中传递内容

Question

我正在开发一个具有响应式布局的 Vue.js 项目，并且遇到了一个问题：我的

AwPage

组件中的插槽无法渲染内容。这是我的设置：

• index.vue：基于

  variant

  属性，为桌面、平板电脑和移动设备使用不同的组件。

• indexPage.vue：将数据传递到

  AwPage

  组件中的槽。

这是我的代码；

这是我的index.vue组件；

`<script setup lang="ts">
import PageDesktop from './sub/PageDesktop.vue';
import PageMobile from './sub/PageMobile.vue';
import PageTablet from './sub/PageTablet.vue';

defineProps<{
  debug?: boolean;
  variant: 'desktop' | 'tablet' | 'mobile';
}>();

const Pages = shallowRef({
  desktop: PageDesktop,
  tablet: PageTablet,
  mobile: PageMobile,
});
</script>

<template>
  <component :is="Pages[variant]" :debug="debug" />
</template>

<style scoped lang="scss">
@media (min-width: 1280px) {
  .responsive-section {
    display: none;
  }
}

@media (max-width: 1280px) {
  .q-drawer {
    display: block;
  }
  .note-view {
    display: none;
  }
  .note-list {
    width: 100%;
  }
  .side {
    width: 35.15%;
    flex-shrink: 0;
  }
  .list {
    width: 64.85%;
  }
  .list-name {
    display: none;
  }
}
</style>`

这是我的indexPage.vue组件；

<template>
  <AwPage variant="desktop">
    <template #sidebar>
      <AwSidebar :tags="tagsData" />
    </template>

    <template #list>
      <NotesList :notes="notesData" />
    </template>

    <template #editor>
      <template v-if="!!$route.query.mode">
        <AwNoteEditor v-if="$route.query.mode === 'edit'" :notes="notesData" />
        <AwNoteView v-if="$route.query.mode === 'view'" :notes="notesData" />
      </template>
      <div v-else>
        <AwSelectNote />
      </div>
    </template>
  </AwPage>
</template>

<script setup lang="ts">
const tagsData = tags;
const notesData = notes;
</script>

<style scoped lang="scss"></style>

所有三个子组件都具有相似的结构。这是使用 PageDesktop 的示例：

<template>
  <q-page class="row justify-between">
    <section class="row justify-between t-w-[45%]">
      <aside class="t-w-[46.15%] side" :class="{ 'border-debug': debug }">
        <slot name="sidebar" />
      </aside>
      <div class="t-w-[53.85%] bg-dark" :class="{ 'border-debug': debug }">
        <slot name="list" />
      </div>
    </section>
    <section class="t-w-[54.86%]" :class="{ 'border-debug': debug }">
      <slot name="editor" />
    </section>
  </q-page>
</template>

<script setup lang="ts">
defineProps<{
  debug?: boolean;
}>();
</script>

• 问题是布局结构和样式渲染正确，但侧边栏、列表和编辑器部分的内容未显示。尽管我将带有数据的组件传递给它们，但这些插槽似乎是空的。

我尝试过的事情

1. 槽名称验证：检查indexPage.vue和AwPage组件之间的槽名称是否匹配。

2. 组件导入：验证所有组件是否正确导入和使用。

3. 静态内容测试：将静态内容直接插入插槽中，但没有显示。

4. 调试布局：使用 debug 属性来确保布局结构正在渲染，确认部分存在但为空。

我不确定为什么插槽不显示内容。任何建议或见解将不胜感激！

Answer 1

Have you tried using <template v-slot:sidebar> instead of <template #sidebar>?