vue组件的创建与使用

最新推荐文章于 2024-05-06 21:48:32 发布

打不死的小强c

最新推荐文章于 2024-05-06 21:48:32 发布

阅读量89

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45637835/article/details/104488937

版权

点击查看效果

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
				<el-button>大家好，我是"xxx"</el-button>
				<el-button>很高兴认识你</el-button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				components:{
					//组件名称:组件对象
					'el-button':{				//'el-button'可以写成elButton  注意拼接第二个单词首字母要大写	
						props:{					//这里可以直接写一个数组  props:['size'], 传入的参数没有限制
							size:{
								type:String, 	//接收的类型为字符串类型
							//	required:true,  必须传入一个参数
								default:'60px'	//如果没有传值的花默认为60px
							}
					},
					template:`<div style="color:red;" :style="{fontSize:size}">
					<slot></slot>   
					</div>`
					//<slot></slot>  可以传入多个一样的组件  这里一定要注意</slot>结束标记
					}
				}
			})
		</script>
	</body>
</html>

优惠劵

打不死的小强c

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件的创建与使用

<html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body>...
复制链接

扫一扫