Vue.js 2.0 Динамические реквизиты Docs

Question

js 2.0 и я запас в динамических реквизитах.

См изображение прилагается

Мой HTML код вроде этого:

<div id="app"> 
    <div> 
     <input v-model="parentMsg"> 
     <br> 
     <child v-bind:my-message="parentMsg"></child> 
    </div> 
</div> 

Мой Компонентный код:

Vue.component('child', { 

    props: ['myMessage'], 
    template: '<p>{{ myMessage }}</p>', 

}) 

var app = new Vue({ 

    el: "#app", 


}); 

Я знаю, что данные должны быть функцией, но как Я собираюсь его реализовать. Я получаю эту ошибку на консоли.

Свойство или метод «parentMsg» не определен на экземпляре, но ссылаются при визуализации

Answer 1

Я думаю, идея ясна. "parentMsg" is not defined on the instance. Вы должны определить parentMsg на уровне родителей. например:

var app = new Vue({ 
    data: { 
     "parentMsg": "" 
    } 
    el: "#app" 
}); 

У вас может быть рабочая скрипка here.