javascript - Vue.JS 中的嵌套组件渲染和绑定(bind)

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% 的 react 。

知道我做错了什么吗？

Answer 1

缺少一些东西:

• 组件缺少 template 属性。
• 建筑组件未使用，并且 bldg 属性丢失。
• 房间组件有一个 number 属性，而不是 room。

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