Vue父子组件的创建和使用

我们可以在组件中定义并使用其他组件，这就构成了父子组件的关系。
局部注册Child组件，该组件只能在父组件的 template 中使用。
在页面中使用<parent-component>标签渲染Parent组件的内容，同时Child组件的内容也被渲染出来。
使用 data 选项时，为避免和全局的 data 选项冲突，必须使用一个函数作为 data 选项，让这个函数返回一个新对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue父子组件的创建和使用</title>
	</head>
	<body>
		<div id="app">
			<!-- 可以使用父组件，不能单独使用子组件 -->
			<parent-component :items="books"></parent-component>
		</div>
	</body>
	<!-- 定义父组件模板 -->
	<template id="parent-component">
		<div>
			<ul>
				<li v-for="item in items"> {{ item.name }} - {{ item.price }}</li>
			</ul>
            <!-- 在Parent组件内使用<child-component>标签 -->
			<child-component></child-component>
		</div>
	</template>
	<!-- 定义子组件模板 -->
	<template id="child-component">
		<p>
			这是一个子组件: {{ child_data }}
		</p>
	</template>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		// 创建全局父组件
		Vue.component('parent-component', {
			props: ['items'], //定义父组件属性
			template: '#parent-component', //绑定父组件模板
			components: {
				'child-component': { //创建子组件
					props: ['child-prop'], //定义子组件属性
					template: '#child-component', //绑定子组件模板
					data() { //定义子组件数据
						return {
							child_data: "葵花宝典 - 5000"
						}
					}
				}
			}
		});

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