vue.js - CoreUI 的 CInput 忽略的插槽

Question

我想，我误会了什么。根据这个文档，我想出了以下原型代码来替换旧的经典语法。但它根本不起作用。

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <CIcon name="cil-lock-locked" />
        </span>
    </div>
    <input type="password"
           class="form-control"
           placeholder="Passwort"
           :isValid="false"
           invalidFeedback="hdhdh"
           v-model="enteredPassword" />
</div>

<!-- ---------------------------------------------- -->

<CInput value="lll">
    <prepend>ppp</prepend>
    <prepend-content>
        dddd
    </prepend-content>
    <label>
        dkjdjdj
    </label>
</CInput>

底部代码仅显示一个完整的空文本框。但为什么？

Answer 1

插槽使用 v-slot 或 # 前缀引用。尝试

<CInput value="lll">
    <template #prepend>ppp</template>
    <template #prepend-content>
        dddd
    </template>
    <template #label>
        dkjdjdj
    </template>
</CInput>

您使用了未知的自定义元素（和 html 标签）而不是插槽。