代码之家  ›  专栏  ›  技术社区  ›  JordanBarber

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

  •  0
  • JordanBarber  · 技术社区  · 6 年前

    在某些情况下,我只需要在模板中重复一些html代码就可以了,但是创建一个新组件并向它传递大量的道具和动态数据似乎是过分了。有没有办法定义一个可以重复使用的模板代码块?

    一个很好的例子是我的VueLidate验证 error 重复的消息。我不想为他们创建一个完整的vue组件,因为然后我需要传入验证、验证属性和其他一些东西,这样就好像创建更多的复杂度只是为了干掉一点模板。

    我在同一个模板中有三个不同场景的代码块,有没有一种方法可以将它们定义为 block 重用。从字面上说,没有什么变化,所以这是非常违背干燥的原则。

    <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>
    
    0 回复  |  直到 6 年前
        1
  •  0
  •   Daniel    6 年前

    可以使用 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

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