12 Vue 组件参数校验与非 props 特性用法汇总和案例

最新推荐文章于 2024-05-07 18:13:09 发布

技术~子云

最新推荐文章于 2024-05-07 18:13:09 发布

阅读量254

点赞数

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

本文链接：https://blog.csdn.net/davice_li/article/details/127481639

版权

vue 专栏收录该内容

29 篇文章 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="app">
			<child content="hellow world"></child>
			
		</div>

		<script type="text/javascript">
			Vue.component("child",{
				props:{
					content:String
				},
				template:"<div>{{content}}</div>"

			})
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

错误的代码验证：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>组件参数校验与非 props 特性</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<child :content="123"></child>
			
		</div>

		<script type="text/javascript">
			Vue.component("child",{
				props:{
					content:String
				},
				template:"<div>{{content}}</div>"

			})
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

如果验证的类型不正确时，报错如下图所示

二、多种类型校验

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>组件参数校验与非 props 特性</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<child :content="123"></child>
			
		</div>

		<script type="text/javascript">
			Vue.component("child",{
				props:{
					//限止content 传入的类型是String类型 
					// content:String
					//校验content类型是以下Number和String两种类型
					content:[Number,String]
				},
				template:"<div>{{content}}</div>"

			})
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

错误的类型传入时，也会出现报错的情况，比如传入 {a:1}对象：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>组件参数校验与非 props 特性</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<child :content="{a:1}"></child>
			
		</div>

		<script type="text/javascript">
			Vue.component("child",{
				props:{
					//限止content 传入的类型是String类型 
					// content:String
					//校验content类型是以下Number和String两种类型
					content:[Number,String]
				},
				template:"<div>{{content}}</div>"

			})
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

内容校验时，可以是对象 content:{} 这样的形式如下完整代码 ,

当required字段为True时，是必填项。default:"default Value" 设置不传入属性时的默认值

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>组件参数校验与非 props 特性</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<child :content="123"></child>
			
		</div>

		<script type="text/javascript">
			Vue.component("child",{
				props:{
					//限止content 传入的类型是String类型 
					// content:String
					//校验content类型是以下Number和String两种类型
					// content:[Number,String]
					//校验时content 也可以是对象 
					content:{
						//类型限止
						type:[String,Number],
						//传入时必须得传入，不然报错
						required:true,
						default:"default Value"
					}
				},
				template:"<div>{{content}}</div>"

			})
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

三、校验传入值的长度大小

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>组件参数校验与非 props 特性</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<child :content="hello world"></child>
			
		</div>

		<script type="text/javascript">
			Vue.component("child",{
				props:{
					//限止content 传入的类型是String类型 
					// content:String
					//校验content类型是以下Number和String两种类型
					// content:[Number,String]
					//校验时content 也可以是对象 
					content:{
						//类型限止
						type:[String,Number],
						//传入时必须得传入，不然报错
						// required:true,
						// default:"default Value"
						// 校验传入值 的长度必须大于 5
						validator: function(value) {
							return (value.length >5)
						}
					}
				},
				template:"<div>{{content}}</div>"

			})
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

四、非props 特性。

如果父组件定义了一个非props 特性，<child :content="hello world"></child>

但是子组件没有使用props接收content属性。非props 在子组件中是无法 content属性的。

非props第二个特性：在父组件中的属性会显示在页面上。

如下的代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>组件参数校验与非 props 特性</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<child :content="hello world"></child>
			
		</div>

		<script type="text/javascript">
			Vue.component("child",{
				// props:{
				// 	//限止content 传入的类型是String类型 
				// 	// content:String
				// 	//校验content类型是以下Number和String两种类型
				// 	// content:[Number,String]
				// 	//校验时content 也可以是对象 
				// 	content:{
				// 		//类型限止
				// 		type:[String,Number],
				// 		//传入时必须得传入，不然报错
				// 		// required:true,
				// 		// default:"default Value"
				// 		// 校验传入值 的长度必须大于 5
				// 		validator: function(value) {
				// 			return (value.length >5)
				// 		}
				// 	}
				// },
				template:"<div>{{content}}</div>"

			})
			var vm = new Vue({
				el: "#app"
			})
		</script>

	</body>
</html>

props属性正常使用：父组件传入到子组件，子组件中就可以使用属性值