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正确呈现 - 我对{I} v-bind以及在哪里感到有点困惑。

我当然喜欢所呈现的对基础实例数据属性的更改有100％反应。

知道我做错了吗？

Answer 1

缺少一些东西：

组件缺少template属性。
未使用构建组件，并且缺少bldg属性。
会议室组件具有number属性，而不是room。

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

嵌套组件渲染＆amp;在Vue.JS中绑定

1 个答案: