vue 学习笔记三：组件

 非单文件组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="root">
			<school></school>
			<hr >
			<student></student>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script>
		//创建组件
		const school = Vue.extend({
			//用到template必须有一个根元素
			template:`<div>
						<h2>{{schoolName}}</h2>
						<h2>{{schoolAddress}}</h2>
					</div>`,
			data(){
				return {
					schoolName:"北京一中",
					schoolAddress:"朝阳路",
				}
			}
		});
		const student = Vue.extend({
			//用到template必须有一个根元素
			template:`<div>
						<h2>{{studentName}}</h2>
						<h2>{{studentAge}}</h2>
					</div>`,
			data(){
				return {
					studentName:"张三",
					studentAge:18,
				}
			}
		});
		//组件的嵌套
		/**const student = Vue.extend({
			//用到template必须有一个根元素
			template:`<div>
						<h2>{{studentName}}</h2>
						<h2>{{studentAge}}</h2>
						<school></school>
					</div>`,
			components:{
					school:school
			},
			data(){
				return {
					studentName:"张三",
					studentAge:18,
				}
			}
		});
		*/
		var vm = new Vue({
			el:"#root",
			//注册组件(局部注册)
			components:{
				school:school,
				student:student
			}
			
		})
	</script>
</html>

posted @ 2022-04-27 16:15  在线电影制作人  阅读(4)  评论(0)    收藏  举报  来源