vue创建组件components

vue创建组件components

例子

//第三步：标签引用
<html>
	<body>
		<school></school>
	</body>
</html>

<script>
//第一步：创建school组件
const school = Vue.extend({
template:`
	<div>
		<h2>学校名：{{schoolNume}}</h2>
	</div>
`,

data(){
	return {
		schoolNume:'学校名'
		}
	}
}),

//创建school组件简写
const school = {
template:`
	<div>
		<h2>学校名：{{schoolNume}}</h2>
	</div>
`,
data(){
	return {
		schoolNume:'学校名'
		}
	}
},


new Vue({
	data(){

	},
//第二部：引用school组件
	compomemts:{
		school:school
		}
	})
</script>

创建全局引用的组件

//第三步:引用hello组件
<html>
	<hello></hello>
</html>

<script>

	//第一步:创建hello组件
	const hello = Vue.extend({
	template:`
	<div>
		<h2>你好</h2>
	</div>
	`,
	data(){
		return {
	
		}
	}
})

	//第二步：全局注册组件
	Vue.component('hello',hello)
</script>

组件嵌套

<script>
	//第一步:创建student组件
	const student = {
	template:`
		
	`,
	}

	//第一步:创建school组件,来嵌套student组件
	const school = { // 这里简写Vue.extend,vue会自动添加
	template:`
	
	`,
	components:{
		student,//如果取名跟引用名一样可以简写
	}
	}

	//第一步:创建一人之上万人之下的组件app来领导其他所有组件
	const app = {
		template:`
	
		`,
		components:{
			school,//如果student已被school管理,不需要再写入app中
			}
		}
	
	new Vue({
		template:`<app></app>`,//可以直接插入dom中,
		data(){
			
		},
		component:{
			app,//vm中子需要引入一个app即可
		}
	})
</script>
posted @ 2022-08-08 13:37  陈陈陈在成长  阅读(141)  评论(0)    收藏  举报