Question

我有两个组成部分：弹出窗口和页面。弹出窗口位于页面内部，我想使用命名的v槽。

在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> can only appear at the root level inside the receiving the component

我尝试绕过一个组件，但没有追加。与速记相同，例如

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

Answer 1

很难从您的代码中看出来，但是我的猜测是您的广告位模板嵌套在另一个无法编译的模板中。

例如：

<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>

Answer 2

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

var chart = c3.generate({
    bindto: d3.select('.chart'),
    onresize: function () {
      //your code to change labels here
    },
    data: {
     ...
    }
});

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

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

我的代码太多，迷路了。谢谢

单个文件组件中的Vue.js v槽

2 个答案: