There is a markup:

<div id="consturctor"> <cb-top-line> <cb-step class="cb-step--current" id="cb-step1" number="1" title="Изображение"> </cb-step> <cb-step id="cb-step2" number="2" title="Рама"> </cb-step> <cb-step id="cb-step3" number="3" title="Заголовок"> </cb-step> <cb-step id="cb-step4" number="4" title="Цвет отпечатков"> </cb-step> </cb-top-line> </div>

Here are the components themselves:

 Vue.component('cb-top-line', { template: '<div class="cb-top-line"></div>' }) Vue.component('cb-step', { props: ['number', 'title'], template: '<div class="cb-step"> \ <p> \ <span>{{ number }}</span> \ {{ title }}\ </p> \ </div>' }) let vm = new Vue({ el: '#constructor' })

As a result, an empty cb-top-line is displayed, without a cb-step inside.

  • And where do they get there inside? In the template, they are not there - Pavel Mayorov
  • and then how to write? - Vadim Spring

1 answer 1

Everything is rendered. You wrote the markup at index , vue finds the cb-top-line element, it knows that it is a component . As a result, it takes the markup that you wrote in this component and inserts it. You have written

 template: '<div class="cb-top-line"></div>'

So it displays an empty cb-top-line . To call another component, write a call to this component in the cb-top-line component. This is how it should work.

  Vue.component('cb-top-line', { template: '\ <div class="cb-top-line">\ <cb-step class="cb-step--current" id="cb-step1" number="1" title="Изображение">\ </cb-step>\ <cb-step id="cb-step2" number="2" title="Рама">\ </cb-step>\ <cb-step id="cb-step3" number="3" title="Заголовок">\ </cb-step>\ <cb-step id="cb-step4" number="4" title="Цвет отпечатков">\ </cb-step>\ </div>\ ' })