当前位置：首页 > news >正文

【前端】prop传值的用法

news 2024/11/15 23:43:12

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>