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

これを行うための適切な方法は何ですか？

Answer 1

あなたがあなたの親コンポーネントとchildData範囲から外れるだけにparentDataを渡している

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

を呼び出します。

あなたが巣にあなたparentDataであなたのchildDataが必要になります。

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

と、このようにあなたの子供にそれを渡す： `data`が原因Vueの中で、プロパティの悪い名前であることを

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