Vue3组件化

最新推荐文章于 2024-09-11 08:00:00 发布

月疯

最新推荐文章于 2024-09-11 08:00:00 发布

阅读量526

点赞数

分类专栏：【VUE.js】

本文链接：https://blog.csdn.net/chehec2010/article/details/119808275

版权

【VUE.js】专栏收录该内容

33 篇文章 3 订阅

订阅专栏

Component组件是可复用的Vue实例，且带有一个名字，可以把组件作为自定义元素来使用

可以将项目中重复出现的页面结构定义为Vuew的组件实例，或将特殊功能封装成组件：
组件分为：
全局组件和局部组件

全局组件，在所有Vue实例中都可以使用
通过应用程序实例app的component()方法来定义
语法：app.component（组件名，选项对象）

1、全局组件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件名就是条用组件的标签名 -->
			<!-- 第三步 组件之间多次条用，互相独立-->
			<my-hello></my-hello>
		</div>
		<!-- 第二步 -->
		<template id="content">
			<div>
				<h3>自定义全局组件</h3>
				<p>name:{{name}}</p>
			</div>
		</template>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						msg:'welcome'
					}
				}
			})
			// 第一步,可以多次调用my-hello，组件进行复用
			// app.component('my-hello',{//第一种
				app.component('MyHello',{//第二种//采用首字母大写，帕斯卡命名法
				//组件的具体定义，组件名建议用短横线连接，全小写
				template:'#content',
				//组件的数据仓库
				data(){
					return{
						name:'tom'
					}
				}
				
			})
			
			//这里的vm本身也是一个组件，称为Root根组件
			const vm=app.mount("#app");
			console.log(app)//应用程序实例
			console.log(vm)//Vue实例
		</script>
	</body>
</html>

2、局部组件

局部组件，只能再构建组件的Vue实例的容器范围内使用

依赖于某个Vue实例，通过选项components:{}来定义

语法：
Vue.createApp({
   components:{
       'component-a':选项对象，
       'component-b':选项对象
   }
})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
		</div>
		<template id="b">
			<div>
				<h3>组件a</h3>
				<comp-a></comp-a>
			</div>
			
		</template>
		<template id="a">
			<div>
				<h3>组件a</h3>
				<p>{{ msg }}</p>
			</div>
			<comp-b></comp-b>
		</template>
		<script>
			Vue.createApp({
				component:{//局部组件
				'comp-a':{//父组件
					template:'#a',
					data(){
						return{
							msg:'hellow'
						}
					},
					component:{//局部组件
						'comp-b':{//子组件，comp-b只能再comp-a中调用
							template:'#b',
							data(){
								return{
									msg:"bbb"
								}
							}
						}
					}
				}
			 }
			}).mount('#app')
		</script>
	</body>
</html>