vue组件-CSDN博客

本文链接：https://blog.csdn.net/qq_30433703/article/details/109306350

Vue组件

组件构造器和注册
全局组件和局部组件
父组件和子组件
注册组件的语法糖
- 注册全局组件的语法糖
- 注册局部组件的语法糖
组件模板抽离

组件构造器和注册

vue组件的基本使用步骤和实现：

组件的使用分为三个步骤：

1.创建组件构造器
2.注册组件
3.使用组件

在这里插入图片描述

<body>
	<div id="app">
		<my-a></my-a>
	</div>
	<script type="text/javascript">
		const a=Vue.extend({
			template: '<div><h2>我是使用组件创建出来的</h2></div>'
		});
		Vue.component('my-a',a);
		
		new Vue({
			el: '#app'
		})
	</script>
</body>

在这里插入图片描述

调用Vue.extend()方法创建的是一个组件构造器，通常在创建组件构造器时传入template代表我们自定义组件的模板，该模板就是在使用到组件的地方要显示的HTML代码

调用Vue.component()是将组件构造器注册为一个组件，并且给它起一个组件的标签名称。所以需要传递两个参数：1. 注册组件的标签名 2. 组件构造器

全局组件和局部组件

全局组件：

<body>
	
	<div id="app">
		<my-a></my-a>
	</div>

	<div id="app2">
		<my-a></my-a>
	</div>
	
	
	<script type="text/javascript">
		const a=Vue.extend({
			template: '<div><h2>我是使用组件创建出来的</h2></div>'
		});

		//这是注册的全局组件(在网页什么地方都能使用)
		Vue.component('my-a',a);
		
		new Vue({
			el: '#app'
		})
		
		new Vue({
			el: '#app2'
		})
	</script>

</body>

在这里插入图片描述

局部组件：
在vue对象里使用components属性定义私有组件

<body>
	<div id="app">
		<mya></mya>
	</div>
	
	<div id="app2">
		<mya></mya>
	</div>	
	
	<script type="text/javascript">
		const a=Vue.extend({
			template: '<div><h2>我是使用组件创建出来的</h2></div>'
		});
		
		new Vue({
			el: '#app',
			components:{
				mya:a
			}
		});
		
		new Vue({
			el: '#app2'
		})
	</script>
</body>

在这里插入图片描述

父组件和子组件

<body>
	<div id="app">
		<par></par>
	</div>
	<script type="text/javascript">
		const son=Vue.extend({
			template: '<div><h2>我是子组件</h2></div>'
		});
		
		const parent=Vue.extend({
			template: `
						<div>
							<h2>我是父组件</h2>
						<sn1></sn1>
						</div>
						
					  `,
			components:{
				sn1:son
			}
		});
		
		new Vue({
			el: '#app',
			components:{
				par:parent
			}
		})
	</script>
</body>

在这里插入图片描述

注册组件的语法糖

注册全局组件的语法糖

<body>
	<div id="app">
		<qa></qa>
		<qb></qb>
	</div>
	<script type="text/javascript">
				
		//第一个组件
		Vue.component('qa',{template: `
									<div>
										<h2>我是组件qa</h2>
									</div>
					  				`});
		
		//第二个组件
		Vue.component('qb',{template: '<div><h2>我是组件qb</h2></div>'});
		
		new Vue({
			el: '#app'
		})
	</script>
</body>

在这里插入图片描述

注册局部组件的语法糖

<body>
	<div id="app">
		<qa></qa>
		<qb></qb>
	</div>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			components:{
				qa:{template: `
								<div>
									<h2>我是组件qa</h2>
								</div>
					  			`},
				qb:{template: '<div><h2>我是组件qb</h2></div>'}
			}
		})
	</script>
</body>

在这里插入图片描述

组件模板抽离

使用script标签

<body>
   <div id="app">
   	<qa></qa>
   	<qb></qb>
   </div>
   
   <script type="text/x-template" id="qa"> 
   	<div>
   		<h2>我是分离的模板1</h2>
   	</div>
   </script>
   
   <script type="text/x-template" id="qb">
   	<div>
   		<h2>我也是分离的模板2</h2>
   	</div>
   </script>
   
   <script type="text/javascript">
   	new Vue({
   		el: '#app',
   		components:{
   			qa:{template: "#qa"},
   			qb:{template: "#qb"}
   		}
   	})
   </script>
</body>

在这里插入图片描述
现在写法注意的是分离模板用script标签的类型是text/x-template，id和template对应，如下图所示：

使用template标签

<body>
	<div id="app">
		<qa></qa>
		<qb></qb>
	</div>
	<template id="qa"> 
		<div>
			<h2>我是使用template标签分离的模板1</h2>
		</div>
	</template>
	
	<template id="qb">
		<div>
			<h2>我也是使用template标签分离的模板2</h2>
		</div>
	</template>
	
	<script type="text/javascript">
		new Vue({
			el: '#app',
			components:{
				qa:{template: "#qa"},
				qb:{template: "#qb"}
			}
		})
	</script>
</body>

在这里插入图片描述