vue父传子

最新推荐文章于 2024-09-12 16:43:23 发布

Zaltana

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量75

点赞数

分类专栏：框架文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/zhoulina815/article/details/123335227

版权

框架专栏收录该内容

18 篇文章 1 订阅

订阅专栏

这篇博客探讨了Vue.js中的组件使用，展示了如何定义并验证组件的props属性，包括String、Number、Object和Array类型。示例代码创建了一个名为'hellobox'的组件，接收name、age、son和array作为输入，并在模板中显示这些属性的值。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			 <hellobox :name="name" :age="age" :son="son" :array="array"></hellobox>
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					name:"周周",
					age:19,// 50 没有双引号或者单引号包围就是数字
					son:{"name":"李李"},
					array:[1,23,"sd",true]
				},
				components:{
					"hellobox":{
						
						//props:["name",'age',"son"],
						// 带类型的验证
						props:{
							name:String,// 验证字符串
							age:Number, //验证时/数字
							son:Object ,// 儿子的类型要求是对象
							array:Array
						},
						template:`
						   <div style="color:red">{{name}}.....{{age}}....{{son.name}}...{{array}}</div>
						`
					}
				}
			})
		</script>
	</body>
</html>

Zaltana

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue父传子

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <hellobox :name="name" :age="age" :son.
复制链接

扫一扫