html - 在创建新组件中创建可重用的 vue 模板 block

Question

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

一个很好的例子是我的 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 进行动态绑定(bind)，这样您就不需要单独绑定(bind)所有属性。

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

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

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