Vue局部组件的创建和使用

在Vue实例中注册的组件，我们称作局部组件。可以用 components 属性实现局部注册。
由于my-component组件是注册在#app元素对应的Vue实例下的，所以它不能在其它Vue实例下使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue局部组件的创建和使用</title>
	</head>
	<body>
		<div id="app">
			<!-- 使用局部组件，并给组件属性绑定数据 -->
			<my-component :items="books"></my-component>
			<hr>
			<my-component :items="cars"></my-component>
		</div>
		<div id="app2">
			<!-- 不能使用my-component组件，因为my-component是一个局部组件，它属于#app-->
		</div>
	</body>
	<!-- 自定义模板 -->
	<template id="my-component">
		<ul>
			<li v-for="item in items"> {{ item.name }} - {{ item.price }}</li>
		</ul>
	</template>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		// Vue实例1
		var vm = new Vue({
			el: '#app',
			components: {
				//创建局部组件，该组件只可以在#app作用域中使用
				'my-component': {
					props: ['items'], //定义组件属性
					template: '#my-component' // 绑定模板
				}
			},
			data: {
				books: [{
						name: '九阴真经',
						price: 2000
					},
					{
						name: '九阳真经',
						price: 3000
					},
					{
						name: '降龙十八掌',
						price: 500
					},
				],
				cars: [{
					name: '特斯拉',
					price: 300000
				}, {
					name: '比亚迪',
					price: 200000
				}]
			}
		})
		// Vue实例2
		new Vue({
			el: '#app2'
		})
	</script>
</html>