在创建新组件时创建可重用的 vue 模板块

Question

在某些情况下，我只需要在模板中重复一些 html 代码来干燥它，但是制作一个新组件并向其传递大量的 props 和动态数据似乎有点矫枉过正。有没有办法定义可以重复使用的可重复模板代码块？

一个很好的例子是我error重复的 vuelidate 验证消息。我不想为它们创建一个完整的 vue 组件，因为这样我需要传递验证、validation 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>

源代码：https: //v2.vuejs.org/v2/api/#v-bind

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