vue.js의 하위 구성 요소에 데이터를 전달하는 방법

Question

vue.js를 처음 사용하고 하위 구성 요소에 값을 전달하려고합니다.

HTML

<div id="example"> 
    <my-component v-bind:data="parentData"></my-component> 
</div> 

JS

Vue.component('my-component', { 
    props: ['data'], 
    template: '<div>Parent component with data: {{ data.value }}!<div is="my-component-child" v-bind:data="childData"></div></div>' 
}); 

Vue.component('my-component-child', { 
    props: ['data'], 
    template: '<div>Child component with data: {{ data.value }} </div>' 
}); 

new Vue({ 
    el: '#example', 
    data: { 
    parentData: { 
     value: 'hello parent!' 
    }, 
    childData: { 
     value: 'hello child!' 
    } 
    } 
}); 

https://jsfiddle.net/v9osont9/2/

그리고이 오류가있어 :

[Vue warn]: Property or method "childData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in)

[Vue warn]: Error in render function: (found in)

TypeError: Cannot read property 'value' of undefined

이 작업을 수행하는 적절한 방법은 무엇입니까? 당신 만 parentData 당신의 부모 구성 요소 및 childData에 전달하는

<my-component v-bind:data="parentData"></my-component> 

전화

Answer 1

는 범위의 밖으로 가져옵니다.

당신은 중첩 할 필요가 당신의 당신의 parentData에 childData :

new Vue({ 
    el: '#example', 
    data: { 
     parentData: { 
      value: 'hello parent!', 
      childData: { 
       value: 'hello child!' 
      } 
     } 
    } 
}); 

이 같은 자녀에 전달 : 뷰에 있기 때문에, data`이 속성에 대한 나쁜 이름은

<div is="my-component-child" v-bind:data="data.childData">