Vue.JS 中的嵌套组件渲染和绑定

Question

我正在学习 Vue.js 并尝试让嵌套组件渲染正常工作。

我从下面开始 (codepen here):

 var buildingComponent = Vue.component('building', {
        template: '#building-component',
  name: 'building-component',
 })

 var roomComponent = Vue.component('room', {
        template: '#room-component',
  name: 'room-component',
  props: ['number'],
 })

 var componentApp = new Vue({
  el: "#components-example",
  data: {
   buildings: [
    {id: 1, name: "144 Orange St", occupants: 5, rooms: [
     {rid: 1, number: "122"},
     {rid: 2, number: "123"},
     {rid: 3, number: "144"},
    ]},

    {id: 2, name: "92 Firth St", occupants: 6, rooms: [
     {rid: 4, number: "155"},
     {rid: 5, number: "344"},
     {rid: 6, number: "343"},
    ]},

    {id: 3, name: "123 Main St", occupants: 2, rooms: [
     {rid: 7, number: "4324"},
     {rid: 8, number: "1244"},
    ]},
   ],
  },
 })

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- Components Example -->
<template id="building-component">
 <div>
  <span>Name: {{ bldg.name }}</span>
  <ul v-if="bldg.rooms">
   <room v-for="room in bldg.rooms" v-bind:room="room" number="room.number"></room>
  </ul>
 </div>
</template>

<template id="room-component">
 <div>
  <li>
   <span>Room {{ room.number }}</span>
  </li>
 </div>
</template>

<p>Components example!</p>
<div id="components-example">
 <ul>
  <li v-for="bldg in buildings" v-bind:bldg="bldg"></li>
 </ul>
</div>

我似乎无法 Vue.js 正确呈现 - 我对我应该 v-bind 和在哪里感到有点困惑。

我当然希望呈现的内容能够 100% 响应基础实例数据属性的更改。

知道我做错了什么吗？

Answer 1

缺少一些东西：

组件缺少 template 属性。
建筑组件未在使用中，bldg 属性丢失。
房间组件有 number 属性而不是 room。

查看工作示例：http://codepen.io/anon/pen/bqNJVe

Vue.JS 中的嵌套组件渲染和绑定

Nested component rendering & binding in Vue.JS

javascript

vue.js

vue-component

vuejs2