Vue全局组件的创建和使用

组件是Vue.js其中一个非常重要的概念，让我们可以使用独立可复用的小组件来构建大型应用。
组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。
调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue实例下使用。
在 props 数组中，定义组件的特有属性，也就是props: ['items']这行代码。
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

<!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>
	</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.component('my-component', {
			props: ['items'], //定义组件属性
			template: '#my-component' // 绑定模板
		});

		var vm = new Vue({
			el: '#app',
			data: {
				books: [{
						name: '九阴真经',
						price: 2000
					},
					{
						name: '九阳真经',
						price: 3000
					},
					{
						name: '降龙十八掌',
						price: 500
					},
				],
				cars: [{
					name: '特斯拉',
					price: 300000
				}, {
					name: '比亚迪',
					price: 200000
				}]
			}
		})
	</script>
</html>