Как вывести template внутри template?

Question

[frontAng]

<template>

  <div>
    <p>1111</p>
  </div>
  <div>
    <p>22222</p>
  </div>
<template>
  <div class="cost">
    <div class="cost__title">test:</div>
    <div class="cost__number">3 400 </div>
  </div>
</template>

</template>

Тоесть на выходе получить такую разметку:

<div>
    <p>1111</p>
      <div class="cost">
    <div class="cost__title">test:</div>
    <div class="cost__number">3 400 </div>
  </div>
  </div>
  <div>
    <p>22222</p>
      <div class="cost">
    <div class="cost__title">test:</div>
    <div class="cost__number">3 400 </div>
  </div>
  </div>

Answer 1

[Aetae]

а) Вынести в отдельный компонент. Чем компоненты меньше - тем лучше для vue. Не стесняйтесь выносить даже одиночный div.

<div>
  <p>1111</p>
  <v-cost />
</div>
<div>
  <p>22222</p>
  <v-cost />
</div>

б) Если это какой-то массив данных - используйте v-for:

<div v-for="{ title } in arr" :key="title">
  <p>{{title}}</p>
  <div class="cost">
    <div class="cost__title">test:</div>
    <div class="cost__number">3 400 </div>
  </div>
</div>

с) Если прям очень хочется говнять в рамках одного компонента, это можно сделать с помощью render функции, но там уже никаких шаблонов - чистый код. Тема "продвинутая", и в твоём случае явно не нужная, так разбирайся сам если хочешь.:)

Answer 2

[Максим Морев]

Проблема не нова, сначала была вот такая дискуссия, потом в качестве решения на базе vue-macros был реализован вариант из обсуждения, и после него уже выросла вот такая простенькая, но рабочая утилитарная функция createReusableTemplate.

Альтернативой будет вынести в отдельный подкомпонент самостоятельно, либо использовать JSX и/или render-функцию, как уже заметили до меня.

Относительно абстрактной "правильности" - если эта механика нужна вам единоразово или около того, и вы не собираетесь каждый компонент дробить внутри на какие-то маленькие кусочки, то возьмите createReusableTemplate, если необходимость в таком управлении видите часто - лучше сформировать какие-то правила по созданию и использованию подкомпонентов - проще поддерживать будет.

Comments

[Aetae]

Если что-то может быть решено выносом компонента - одно должно быть решено выносом компонента. Это выгоднее со всех сторон: и упрощает читаемость, и увеличивает производительность, и улучшает поддерживаемость.
А городить переусложнения в шаблоне - наоборот очень плохо.:)

Но ктоб меня слушал...