初识 Vue（16）---（组件参数校验与非Props特性）

最新推荐文章于 2024-05-17 08:00:00 发布

姜皓

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量867

点赞数 1

分类专栏： # Vue # 从浅入深学 Vue

本文链接：https://blog.csdn.net/jianghao233/article/details/81260642

版权

Vue 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

从浅入深学 Vue

28 篇文章 8 订阅

订阅专栏

组件参数校验与非Props特性

1.组件参数校验：

父组件向子组件传递内容，子组件可以对这些内容做一些约束，这种约束称为组件参数校验

示例：对传入数据 content 进行约束，必须为 string 类型数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件参数校验与非Props特性</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
	<child content="hello world"></child>	
	</div>	
	<script>
	Vue.component('child',{
		//对 content 进行约束，必须是字符串String类型
		props:{
			content:String
		},
		template:'<div>{{content}}</div>'
	})

	var vm = new Vue({
		el:'#root'
		
		})
	</script>
</body>
</html>

输出：

当更改输入为数字（Number）类型时

<child :content="123"></child>

输出：报错（[Vue warn]: Invalid prop: type check failed for prop "content". Expected String, got Number.）

改变约束条件为输入为 Number 类型，错误消失

props:{
			content:Number
		},

输出：

若想同时满足条件，加入数组即可

props:{
			content:[Number,String]
		},

同样的，使用对象也可以完成上述功能

props:{
			content:{
				type:String
			}
		},

稍微复杂一些的功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件参数校验与非Props特性</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
	<child ></child>	
	</div>	
	<script>
	Vue.component('child',{
		//对 content 进行约束，必须是字符串String类型
		props:{
			content:{
				type:String,
				required:false,  //不传递数据
				default:'default value' //属性content不传递值时的输出内容
			}
		},
		template:'<div>{{content}}</div>'
	})

	var vm = new Vue({
		el:'#root'
		
		})
	</script>
</body>
</html>

输出：

再复杂一点的功能（对输入内容的长度进行约束）

Vue.component('child',{
		//对 content 进行约束，必须是字符串String类型
		props:{
			content:{
				type:String,
				
				validator:function(value){
					return (value.length > 5)
	//对 content 属性通过校验器进行校验，value 是传入的内容，要求传入的内容长度必须 > 5
	
				}
			}
		},
		template:'<div>{{content}}</div>'
	})

当输出为 hello world 时满足条件，不报错

当输出为 hell 时，不满足条件，报错

2.Props特性

当父组件调用子组件，通过属性向子组件传值的时候（传递了 content），如果子组件里写了对父组件内容的接收（在 Props 中声明了 content）,父子组件之间有对应关系，这种对应关系就称为 Props特性；

Props特性的特点：1.content 在 DOM 结构中不显示

<body>
	<div id="root">
	<child content="hell"></child>	
	</div>

控制台输出：

特点2：父组件传递 content ,子组件接收 content ,在子组件里可以通过差值表达式的形式来取得 content 中的内容了

将 hell 传给 content ，子组件通过差值表达式来获取到 hell ---Props特性

3.非Props特性

父组件向子组件传递了一个属性，但子组件中并没有 Props 内容，子组件并没有声明要接收父组件传递过来的内容

特点1.如果声明非 Props特性，则 content="hell" 为非 Props特性，在子组件中无法获取到 content 内容，故会报错

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件参数校验与非Props特性</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
	<child content="hell"></child>	
	</div>	
	<script>
	Vue.component('child',{
		
		template:'<div>{{content}}</div>'
	})

	var vm = new Vue({
		el:'#root'
		
		})
	</script>
</body>
</html>

2.特点2：声明非 Props特性，这个属性会展示在子组件最外层的 DOM 标签HTML 属性里面

template:'<div>hello</div>'

输出：

姜皓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识 Vue（16）---（组件参数校验与非Props特性）

组件参数校验与非Props特性1.组件参数校验：父组件向子组件传递内容，子组件可以对这些内容做一些约束，这种约束称为组件参数校验示例：对传入数据 content 进行约束，必须为 string 类型数据&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &
复制链接

扫一扫