子コンポーネントにデータを渡す方法は？

Question

私はvue.jsを学習しており、私の質問に対する答えはdocumentation for dynamic propsです。しかし私は実際に私のデータ構造のために働くことに失敗します。

Vue.component('cell', { 
 
    props: cell, 
 
    template: '<div>day is {{ cell.name }}</div>' 
 
}) 
 

 
new Vue({ 
 
    el: '#container', 
 
    data: { 
 
    "week": { 
 
     "today": { 
 
     "name": "Monday" 
 
     }, 
 
     "tomorrow": { 
 
     "name": "Tuesday" 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 

 
<div id="container"> 
 
    <cell v-bind:cell="week.today"></cell> 
 
    <cell v-bind:cell="week.tomorrow"></cell> 
 
</div>

（このスニペットはまったく、わからないvue.jsがある場合は実行されません：

私の意図は、Vueインスタンスからのデータが供給されるカスタムコンポーネント<cell>を持つことです私も持っています）

期待される結果は

です

<div>day is Monday</div> 
<div>day is Tuesday</div> 

出力が空ですので、コードに根本的な問題があると思います。それは何ですか？

Answer 1

propsはとても基本的に、配列やオブジェクトでなければなりません：

props: ['cell'] 

または

props: { 
    cell: { 
    // options 
    } 
} 

しかしない：

props: cell 

私はあなたのためのフィドルを修正しましたここ：

https://jsfiddle.net/11cj0Lx6/3/