vue中的常规包装渲染

Question

我正在制作一个链接/按钮组件，该组件可以具有按钮或锚定包装，文本和可选图标。我下面的模板代码当前基于包装元素上的if语句呈现锚或按钮（内容完全相同），从而导致代码重复。

<template>
    <a v-if="link" v-bind:href="url" class="btn" :class="modifier" :id="id" role="button" :disabled="disabled">
        {{buttonText}}
        <svg class="icon" v-if="icon" :class="iconModifier">
            <use v-bind="{ 'xlink:href':'#sprite-' + icon }"></use>
        </svg>
    </a>
    <button v-else type="button" class="btn" :class="modifier" :id="id" :disabled="disabled">
        {{buttonText}}
        <svg class="icon" v-if="icon" :class="iconModifier">
            <use v-bind="{ 'xlink:href':'#sprite-' + icon }"></use>
        </svg>
    </button>
</template>

是否有更干净的方法将buttonText和图标包装在锚点或按钮内？

Answer 1

您可以将包装元素提取到专用组件中。

<template>
    <a v-if="link" v-bind:href="url" class="btn" :class="modifier" :id="id" role="button" :disabled="disabled">
        <slot></slot>
    </a>
    <button v-else type="button" class="btn" :class="modifier" :id="id" :disabled="disabled">
        <slot></slot>
    </button>
</template>

// You would use it like this

<SomeComponent /* your props here */ >
    {{buttonText}}
    <svg class="icon" v-if="icon" :class="iconModifier">
        <use v-bind="{ 'xlink:href':'#sprite-' + icon }"></use>
    </svg>
</SomeComponent>

Answer 2

有多种方法。根据观点，下面是两个示例：

1. 您正在定义两个不同的组件（Button或Anchor），并希望使用包装器来呈现其中之一。

   • 请参阅https://stackoverflow.com/a/60052780/11930769的答案

2. 您正在将内容定义为组件，并使用包装器来定义将内容包装在其中的内容。

   • 这基本上只是使角度为“ 1”的另一角度。工作。包装器Component的定义与方法1相同，但是将包装<slot/>组件。这样，您可以像普通的HTML标签一样使用包装器组件，并切换其内容。要了解更多有关的信息，请看一下文档：https://vuejs.org/v2/guide/components-slots.html

非常高兴知道，为什么要实现这一目标。也许有针对您的用例的更好的解决方案。干杯！