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企服之家,中国第一个企服评测及商务社交产业平台。 |