Создать многократно используемый блок шаблона VUE в рамках создания нового компонента - PullRequest
Новая
       55

Создать многократно используемый блок шаблона VUE в рамках создания нового компонента

0 голосов
/ 04 марта 2019

В некоторых случаях мне нужно просто повторить некоторый HTML-код в моем шаблоне, чтобы высушить его, но создание нового компонента и передача ему тонны реквизита и динамических данных кажется излишним.Есть ли способ определить повторяемый блок кода шаблона, который можно просто повторно использовать?

Хороший пример этого - мои проверяющие сообщения 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>

1 Ответ

0 голосов
/ 04 марта 2019

вы можете сделать динамическое связывание, используя 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

Вы также можете использовать слоты или интервалы с ограничениями, которые обычно используются для таких вещей, как перенос сообщений об ошибках в более сложную разметку.

...