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

Question

在某些情况下，我需要在我的模板中重复一些html代码来干掉它，但是制作一个新的组件并将大量的道具和动态数据传递给它似乎有些过分。有没有办法定义可重复使用的可重复模板代码块？

一个很好的例子是我重复的vuelidate验证error消息。我不想为它们创建一个完整的vue组件，因为那时我需要传递验证，验证prop和一些其他的东西，这样看来创建更多的复杂性只是为了干掉模板的一小部分。

我在同一个模板中有三个不同风格的代码块，有没有一种方法可以将它们定义为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

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