Vue.js2 - Детский компонент не отображается

Я новичок в vuejs и только начал играть с ним. Пробовав разные учебники, я застрял в этом примере кода, который не работает. Может кто-нибудь объяснить, почему второй компонент не отображается?Vue.js2 - Детский компонент не отображается

Vue.component('first-component', { 
 
    template: `<div>This is first component: {{val}}!</div>`, 
 
    data: function() { 
 
    return { 
 
     val: "FIRST <second-component></second-component>" 
 
    } 
 
    }, 
 
}) 
 

 
Vue.component('second-component', { 
 
    template: `<p>This is second component: {{val}}</p>`, 
 
    data: function() { 
 
    return { 
 
     val: 'SECOND' 
 
    } 
 
    }, 
 
}) 
 

 
new Vue({ 
 
    el: '#example' 
 
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 

 
<div id="example"> 
 
    <first-component></first-component> 
 
</div>

источник

2017-01-25 Avinash Utekar

Проблема вы поставили <second-component> в валь переменной, и пытается сделать его с Усы синтаксисом Однако, как указано в docsдвойного усов интерпретирует данные в виде обычного текста, не HTML

Вы можете использовать v-html вставить компонент как обычный HTML, но опять-таки stated: содержимое INSER как простой HTML - они не будут скомпилированы как шаблоны Vue.

Единственный способ вы можете сделать second-component это положить это в шаблоне:

template: `<div>This is first component: {{val}}!<second-component></second-component></div>`,

источник

2017-01-25 18:39:54 Saurabh

Спасибо за указание заявление __ «Обратите внимание, что содержимое вставляются в виде обычного HTML. - они не будут собраны в качестве шаблонов Vue» __ Это причина, почему он не получает оказаны. И я думаю, что так должно быть. –

Это потому, что вы возвращаете его как «данные» в «VAL». Таким образом, это не оценивается компонентом. Если вы поместите его в шаблон, он будет работать.

Vue.component('first-component', { 
 
    template: `<div>This is first component: {{val}}! <second-component></second-component></div>`, 
 
    data: function() { 
 
    return { 
 
     val: "FIRST" 
 
    } 
 
    }, 
 
}) 
 

 
Vue.component('second-component', { 
 
    template: `<p>This is second component: {{val}}</p>`, 
 
    data: function() { 
 
    return { 
 
     val: 'SECOND' 
 
    } 
 
    }, 
 
}) 
 

 
new Vue({ 
 
    el: '#example' 
 
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
 

 
<div id="example"> 
 
    <first-component></first-component> 
 
</div>

источник

2017-01-25 18:40:31

Vue.js2 - Детский компонент не отображается

ответ

Смежные вопросы