prop配置项的作用是让组件接收外部传过来的值。
组件标签上传值给vue组件对象
<script>
export default {
name: 'HelloWorld',
data(){
return{
}
},
props:['name','age'] #简单接收
}
</script>
方式2:利用对象方式设置数据类型进行类型限制
props:{
name:String,
age:Number
}
数据类型包含了以下几种:
方式3:比较完整的带有prop验证方式的写法
props:{
name:String,
age:{
type:Number,
default:99 //设置默认值,如果他的默认值是数组或者对象必须从一个工厂函数获取
},
sex:{
type:String,
required:true //必须填写
},
//自定义验证函数
score:{
type:Number,
validator(value){
return value>=0 && value<=100 //验证函数返回值为true则验证通过
}
}
}
props是只读的,如果需要修改可以复制props中的内容到data中一份,然后去修改data中的数据。因为vue底层会检测对props的修改,如果进行了修改,就会发出警告。
<template>
<div class="hello">
<h1>学生信息</h1>
<h2>学生名称:{{name}}</h2>
<h2>学生年龄:{{myAge+1}}</h2>
<h2>学生性别:{{sex}}</h2>
<button @click="myAge++">年龄+1</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
myAge:this.age
}
},
// props:{
// name:String,
// age:Number
// }
props:{
name:String,
age:{
type:Number,
default:99 //设置默认值,如果他的默认值是数组或者对象必须从一个工厂函数获取
},
sex:{
type:String,
required:true //必须填写
},
//自定义验证函数
score:{
type:Number,
validator(value){
return value>=0 && value<=100 //验证函数返回值为true则验证通过
}
}
}
}
</script>