单文件组件中的 Vue.js v-slot

Question

我有两个组件：弹出窗口和页面。弹出窗口位于页面内，我想使用 name v-slot。

在popup.vue（单文件组件）内部，代码是：

<template>
  <div>
    ...
    <slot/> // default
    ...
    <slot name="bottom"/> // name slot
  </div>
</template>

现在在我的页面中，我导入弹出窗口并使用它，如下所示：

<template>
  ...
  <popup v-if="...">
    content of slot by default...
    <template v-slot:bottom>
      content text
    </template>
  </popup>
  ...
</template>

但有一个错误：

<template v-slot>只能出现在接收组件内部的根级别

我尝试使用组件绕过但没有附加任何内容。与简写相同，例如：

<template #bottom>...</template>

Answer 1

好的，谢谢大家，但这是我这边的错误。我写 ：

<popup>
  <div>
    default content
    <template v-slot:bottom>bottom content</template>
  </div>
</popup>

但我需要在使用模板之前关闭 div。

<popup>
  <div>default content</div>
  <template v-slot:bottom>bottom content</template>
  <!-- </div> -->
</popup>

我有太多的代码并且迷失在其中。谢谢

Answer 2

很难从你的代码中看出，但我的猜测是你的插槽模板嵌套在另一个模板中 - 无法编译。

例如：

<popup>
  Test

  <template #bottom><!-- Works -->
    <template>
      Test
    </template>
  </template>
</popup>

<popup>
  Test

  <template>
    <template #bottom><!-- Fails, because the slot is not on the root template element. -->
      Test
    </template>
  </template>
</popup>