【前端】prop传值的用法

prop配置项的作用是让组件吸收外部传过来的值。
组件标签上传值给vue组件对象

1. <script>
2. export default {
3.   name: 'HelloWorld',
4.   data(){
5.     return{      
6.     }
7.   },
8.   props:['name','age']      #简单接收
9. }
10. </script>

复制代码

方式2:利用对象方式设置数据范例举行范例限定

1. props:{
2. name:String,
3. age:Number
4. }

复制代码

数据范例包含了以下几种：

方式3：比力完整的带有prop验证方式的写法

1. props:{
2.     name:String,
3.     age:{
4.       type:Number,
5.       default:99  //设置默认值，如果他的默认值是数组或者对象必须从一个工厂函数获取
6.     },
7.     sex:{
8.       type:String,
9.       required:true  //必须填写
10.     },
11.     //自定义验证函数
12.     score:{
13.       type:Number,
14.       validator(value){
15.         return value>=0 && value<=100   //验证函数返回值为true则验证通过
16.       }
17.     }
18. }

复制代码

props是只读的，如果需要修改可以复制props中的内容到data中一份，然后去修改data中的数据。由于vue底层会检测对props的修改，如果举行了修改，就会发出警告。

1. <template>
2.   <div class="hello">
3.     <h1>学生信息</h1>
4.     <h2>学生名称：{{name}}</h2>
5.     <h2>学生年龄：{{myAge+1}}</h2>
6.     <h2>学生性别：{{sex}}</h2>
7.     <button @click="myAge++">年龄+1</button>
8.   </div>
9. </template>
11. <script>
12. export default {
13.   name: 'HelloWorld',
14.   data(){
15.     return{     
16.       myAge:this.age
17.     }
18.   },
19.   // props:{
20.   //   name:String,
21.   //   age:Number
22.   // }
23.   props:{
24.     name:String,
25.     age:{
26.       type:Number,
27.       default:99  //设置默认值，如果他的默认值是数组或者对象必须从一个工厂函数获取
28.     },
29.     sex:{
30.       type:String,
31.       required:true  //必须填写
32.     },
33.     //自定义验证函数
34.     score:{
35.       type:Number,
36.       validator(value){
37.         return value>=0 && value<=100   //验证函数返回值为true则验证通过
38.       }
39.     }
40.   }
41. }
42. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。