javascript - 如何向子组件传递数据？

Question

我正在学习vue.js我的问题的答案在 documentation for dynamic props 。然而，我未能在实践中研究我的数据结构。

我的目的是拥有一个自定义组件 <cell>提供来自 Vue 的数据实例:

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。我还有 a JSFiddle to test on )

预期结果是

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

输出为空，因此我相信我的代码存在根本性错误。它是什么？

Answer 1

props 必须是数组或对象，所以基本上:

props: ['cell']

或

props: {
   cell: {
     // options
   }
}

但不是:

props: cell

我已经在这里为您修复了 fiddle :

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