为什么 v 槽在单个文件中不起作用？

如何解决为什么 v 槽在单个文件中不起作用？

我想构建一个这样的组件：

<v-row>
  <v-col cols="6"> this is first Box: <slot name="first" /></v-col>
  <v-col cols="6"> this is second Box: <slot name="second" /></v-col>
  <template v-slot:first> something first.... </template>
  <template v-slot:second> something second.... </template>
</v-row>

但它返回一个错误

<template v-slot> can only appear at the root level inside the receiving component

我怎样才能让它工作？

------添加：------

请告诉我如何以这种方式构建组件：

<v-row>
  <v-col cols="6"> this is first Box: 
    <SomethingLikeSlot name="first" />
  </v-col>
  <v-col cols="6"> this is second Box: 
    <SomethingLikeSlot name="second" />
  </v-col>
  <template somethingLikev-slot="first"> something first.... </template>
  <template somethingLikev-slot="second"> something second.... </template>
</v-row>

我只想构建一个组件并制作上面所有的结构（请参阅顶部的 v-col）并将内容放在下面。 我不喜欢这种构建组件的方式，因为它会使布局（v-col）彼此相距太远：

<v-row>
  <v-col cols="6"> this is first Box: 
    <template > something very long....
    1
    2
    3
    6
    ...
    </template>
  </v-col>
  <v-col cols="6"> this is second Box: 
    <template > something second very long.... </template>
  </v-col>
</v-row>

但是现在slot和v-slot似乎只需要构建两个组件来应对这种情况。我可以只构建一个组件来实现这个目标吗？

解决方法

您没有正确使用插槽。我不确切知道您想要实现什么，但应该在使用您的自定义组件的父组件中使用 <template v-slot>。

例如，如果您有此组件，我们将其命名为 foo：

<v-row>
  <v-col cols="6"> this is first box: <slot name="first" /></v-col>
  <v-col cols="6"> this is second box: <slot name="second" /></v-col>
</v-row>

所以在你的父组件中，我们称之为parentFoo：

<div>
  <foo>
     <template v-slot:first> something first.... </template>
     <template v-slot:second> something second.... </template>
  </foo>
</div>

这意味着 <template v-slot:first> 里面的内容会被渲染在里面

<v-col cols="6"> this is first box: <slot name="first" /></v-col>

所以渲染结果将是：

<v-col cols="6"> this is first box: something first....</v-col>

您可以在 vue docs

中阅读有关 v-slot 的更多信息