41.Vue嵌套组件-CFANZ编程社区

41.Vue嵌套组件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- <app></app> -->
		</div>
	</body>
</html>

<script type="text/javascript">
	//定义student组件
	const student = Vue.extend({
		name: 'student',
		template: `
		<div>
			<h2>姓名:{{student_name}}</h2>
			<h2>年龄:{{age}}</h2>
		</div>`,
		data() {
			return {
				student_name: 'llx',
				age: 25
			}
		}
	});

	//定义school组件
	const school = Vue.extend({
		name: 'school',
		template: `
		<div>
			<h2>名称:{{school_name}}</h2>
			<h2>地址:{{address}}</h2>
			<student></student>
		</div>`, //school是父组件，子组件必须在父组件里定义<student></student>
		components: {
			student
		},
		data() {
			return {
				school_name: '广职院',
				address: '佛山'
			}
		}
	});

	const app = Vue.extend({
		template: `
		<div>
			<h2>名称:{{school_name}}</h2>
			<h2>地址:{{address}}</h2>
			<student></student>
			<school></school>
		</div>
		`,
		components: {
			school,
			student
		}
	});

	//创建vm
	new Vue({
		template: '<app></app>',
		el: '#root',
		//注册组件
		components: {
			app
		},
		data: {
			msg: '欢迎学习Vue!'
		}
	});
</script>
0 条评论