vue组件数据传递props--数据类型和数据校验

vue组件数据传递props--传递的数据类型，props能传递任意类型的值！

案例：

<template>
	<ComponentA  :title="title" :age="age" :arrData="arrData" :objData="objData" />
</template>

<script>
	import ComponentA from './componentA.vue'
	export default {
		data() {
			return {
				title:'props数据类型',
				age:20,
				arrData:['iwen','pite','anli'],
				objData:{
					names:'张三',
					sex:'男'
				}
			}
		},
		components: {
		    // 局部注册组件
			ComponentA
		  }
	}
</script>

props接收数据并校验数据：

<template>
	<h3>父级的标题：{{title}}</h3>
	<h4>父级的age:{{age}}</h4>
	<p v-for="(item,index) of arrData" :key="index">{{item}}</p>
	<p><span>{{objData.names}}</span>-- <span>{{objData.sex}}</span></p>
</template>

<script>
	export default{
		
		//方式1
		//props:['title','age','arrData','objData']  
		
		//方式2
		props:{
			title:{
				type:String,  //验证数据类型 可以验证多个[String,Number]
				require:true  //必选项 不传该数据会报警告
			},
			age:{
				type:Number,
				default:0      //设置默认值
			},	
			//这里注意一下：数组或对象必须使用工厂函数设置默认值
			arrData:{
				type:Array,
				default(){
					return [];
				}      //设置默认值
			},	
			objData:{
				type:Array,
				default(){
					return {};
				}      //设置默认值
			},	
		},
		
		//注意：props传递数据只能从父级传给子级，子级props接收的数据是只读的，不能在对数据操作
	}
</script>

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/158/1077.html

很赞哦！ (0)