vue-组件以及父子组件的基本使用

最新推荐文章于 2023-06-07 11:40:11 发布

HPF_99

最新推荐文章于 2023-06-07 11:40:11 发布

阅读量192

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/hpf_99/article/details/112634437

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

注意局部组件与全局组件的区别
局部组件要在Vue对象中注册
而全局组件可以用Vue.component(“com”,com);直接注册
局部组件只有在挂载的Vue对象中注册的才可以使用，全局组件在所有的Vue对象中都可以使用
ES6中可以使用``写入文字或html标签（类似单双引号）中间可打回车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id='app'>
			<com></com>
		</div>
		<script src="js/vue.js"></script>
		<script>
			// 创建组件构造器
			var com = Vue.extend({
				template:`
				<div>
					<h2>内容</h2>
				</div>`
			});
			// 注册组件（全局组件）
			//Vue.component("com",com);
			var app = new Vue({
				el:"#app",
				components:{
					// 局部构造器
					'com':com
				}
			});
		</script>
	</body>
</html>

子组件需要在父组件中注册，并只能在父组件中使用
可以不用写extend，用语法糖格式直接将{}对象中的内容写入components中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id='app'>
			<com2></com2>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var com1 = Vue.extend({
				template:`
				<div>
					<h2>我是com1</h2>
				</div>`
			});
			var com2 = Vue.extend();
			var app = new Vue({
				el:"#app",
				components:{
					'com2':{
						template:`
							<div>
								<h2>我是com2</h2>
								<com1></com1>
							</div>`,
							components:{
								'com1' : com1
							}
						}
				}
			});
		</script>
	</body>
</html>

组件模板抽取
使用template标签，将需要写入的html代码写入，再加入id属性，在注册时将template后面的组件内容换成id名即可

		<template id="com1">
			<div>
				<h2>我是com1</h2>
			</div>
		</template>
		<script src="js/vue.js"></script>
		<script>
			var com1 = Vue.extend({
				template:'#com1'
			});

组件数据的存放必须为函数，将数据保存在返回的对象中

		<template id="com1">
			<div>
				<h2>{{mes}}</h2>
			</div>
		</template>
		<script src="js/vue.js"></script>
		<script>
			var com1 = Vue.extend({
				template:'#com1',
				data:function(){
					return {
						mes :"我是com1"
					}
				}
			});

HPF_99

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-组件以及父子组件的基本使用

注意局部组件与全局组件的区别局部组件要在Vue对象中注册而全局组件可以用Vue.component(“com”,com);直接注册局部组件只有在挂载的Vue对象中注册的才可以使用，全局组件在所有的Vue对象中都可以使用ES6中可以使用``中间可打回车<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head>
复制链接

扫一扫