Question

在某些情况下，我只需要在模板中重复一些html代码即可将其干燥，但是制作一个新组件并将大量道具和动态数据传递给它似乎有点过头了。有没有一种方法可以定义可重复使用的模板代码块，而该代码块可以重复使用？

一个很好的例子是我重复的验证性验证error消息。我不想为他们创建一个完整的vue组件，因为然后我需要传递验证，验证道具和其他一些东西，以致于看起来像创建更多的复杂性只是将模板干一点。 >

我在同一模板中的三个不同场景中都有这段代码，有没有办法我可以将它们定义为block以便重用。从字面上看，没有任何变化，因此非常违反DRY原则。

<span
   v-if="!$v.initialReplyText.required"
   class="error">Your reply cannot be empty.</span>
<span
   v-if="!$v.initialReplyText.maxLength"
   class="error">Your reply cannot be over 2,000 characters.</span>

Answer 1

您可以使用v-bind进行动态绑定，这样就不必单独绑定所有属性。

<!-- pass down parent props in common with a child component -->
<child-component v-bind="$props"></child-component>

src：https://vuejs.org/v2/api/#v-bind

您还可以使用插槽或作用域插槽，这些插槽通常用于将错误消息包装在更复杂的标记中。

Answer 2

如果所有元素都像你的例子一样连续排列，你可以使用 v-for 如下：

<span v-for="(criteria, msg) in {'Your reply cannot be empty.': !$v.initialReplyText.required, 'Your reply cannot be over 2,000 characters.': !$v.initialReplyText.maxLength }" 
      v-if="criteria" class="error">
    {{msg}}
</span>

在创建新组件的过程中创建可重复使用的Vue模板块

2 个答案: