如何將數據傳遞給子組件？

Question

我在學習vue.js，我的問題的答案在documentation for dynamic props。然而我沒有在實踐中爲我的數據結構工作。

我的目的是讓來自Vue實例與數據饋送的自定義組件<cell>：

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我也有）

預期結果是

<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/