首页> 基础笔记 >Vue学习笔记 Vue学习笔记
vue组件数据传递props--数据类型和数据校验
作者：小萝卜 2024-03-13 【 Vue 】 浏览 82
简介vue组件数据传递props--传递的数据类型，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>
很赞哦！ (0)
