Question

我在Vue.js中有以下模板

<template>
    <span>
        <span class="format-decimal">{{toHoursDecimal(minutes)}}<slot></slot></span>
        <span class="format-minutes">{{toHoursMinutes(minutes)}}<slot></slot></span>
    </span>
</template>

这反过来在我的网页中以下列方式使用：

<k-duration :minutes="scheduleData.totalBreaksInMinutes"><br></k-duration>
<k-duration :minutes="scheduleData.pause"></k-duration>

问题是我收到一条警告，说你不能在同一个工作树中有多个默认插槽。当然，这是因为我有两个插槽而Vue.js并不喜欢它。

现在，我尝试了一个单一插槽的各种方法，但问题是那里有一个换行符...如果我甚至考虑将换行放在任何地方但当前位置，下面的行得到未对齐几个像素。

此外，模板中的两个<span>永远不会同时显示。他们在两种不同的显示设置之间切换。基本上，我想要的就是摆脱警告。

我已经在范围内的插槽上读了很多东西，命名为插槽......但基本上，我真正想要的是同时放在这两个地方的相同值。有一种简单的方法吗？

Answer 1

您可以使用named slots：

<template>
    <span>
        <span class="format-decimal">{{toHoursDecimal(minutes)}}<slot></slot></span>
        <span class="format-minutes">{{toHoursMinutes(minutes)}}<slot name="two"></slot></span>
    </span>
</template>

第一个插槽将是默认插槽，第二个插槽可以通过显式设置名称来使用：

<k-duration :minutes="scheduleData.totalBreaksInMinutes">This will go into the default slot<br></k-duration>
<k-duration :minutes="scheduleData.pause"><span slot="two">This will go into the second slot</span></k-duration>

作为旁注，如果您所做的只是进行换行，那么最好只使用css。

Vue.js将相同的值放在两个不同的插槽中

1 个答案: