ToB企服应用市场:ToB评测及商务社交产业平台
标题:
【前端】prop传值的用法
[打印本页]
作者:
拉不拉稀肚拉稀
时间:
昨天 06:04
标题:
【前端】prop传值的用法
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>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4