Vue组件参数校验与非props特性

最新推荐文章于 2021-02-22 20:05:09 发布

A cold winter

最新推荐文章于 2021-02-22 20:05:09 发布

阅读量105

点赞数

分类专栏： Vue.js基础文章标签： vue

本文链接：https://blog.csdn.net/qq_41611820/article/details/102395804

版权

Vue.js基础专栏收录该内容

20 篇文章 1 订阅

订阅专栏

父组件是通过属性绑定的方式向子组件传值的,子组件有权对父组件传来的参数进行一些约束，我们就称这为组件参数校验。
比如我们希望约束父组件传递来的数据都是字符串型的：

<body>
		<div id="root">
			<child content="Hello World"></child>
		</div>
		<script>
			//定义一个全局组件
			Vue.component('child',{
				props:{
				   content: String
				},
				template:'<div>{{content}}</div>'
			})
			var vm=new Vue({
				el:'#root'
			})
		</script>
	</body>

数字型的：

<body>
		<div id="root">
			<child :content="123"></child>
		</div>
		<script>
			//定义一个全局组件
			Vue.component('child',{
				props:{
				   content: Number
				},
				template:'<div>{{content}}</div>'
			})
			var vm=new Vue({
				el:'#root'
			})
		</script>
	</body>

是字符串，或者是数字类型：

<body>
		<div id="root">
			<child :content="123"></child>
		</div>
		<script>
			//定义一个全局组件
			Vue.component('child',{
				props:{
				   content:[String,Number]
				},
				template:'<div>{{content}}</div>'
			})
			var vm=new Vue({
				el:'#root'
			})
		</script>
	</body>

当然也可以要求其它类型，如对象等。除了类型type，还有其它属性可以使用，还可以写自定义校验：

<body>
		<div id="root">
			<child content="Hello World"></child>
		</div>
		<script>
			//定义一个全局组件
			Vue.component('child',{
				props:{
				   content:{
				   	type:String,     //类型
				   	required:false,  //是否必传
				   	default:'default value',  //默认值
				   	validator:function(value){   //自定义校验，校验参数的长度是否大于五，大于返回true，小于 返回false
				   		return (value.length>5)  
				   	}
				   }
				},
				template:'<div>{{content}}</div>'
			})
			var vm=new Vue({
				el:'#root'
			})
		</script>
	</body>