Vue.js 2.0 동적 소품 문서

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을 가질 수 있습니다.