day75-props属性

props属性

在组件中接受外部传来的数据

本案例是由school组件中接受从app中传来的数据，进行age的加法

实现方法

school组件：

 <template>
   <div class="demo">
     <h1>{{msg}}</h1>
     <h2>学生姓名：{{name}}</h2>
     <h2>学生性别：{{sex}}</h2>
     <h2>学生年龄：{{myAge+1}}</h2>
     <button @click="updateAge">点我修改年龄</button>
   </div>
 </template>
 ​
 <script>
 export default {
   name: "StudentMsg",
   data(){
     return{
       msg:'我是一个学生',
       myAge:this.age
 ​
     }
   },
   methods:{
     updateAge(){
       this.myAge=99
     }
   },
   // props:['name','age','sex']  //简单接收
   //接收的同时对数据类型进行限制
   /*props:{
     name:String,
     sex:String,
     age:Number,
   }*/
 ​
   //接收的同时对数据类型进行限制，对默认值进行指定，对必要性进行限制
   props:{
     name:{
       type:String,  //类型是字符串
       required:true,  //是必须要传的
     },
     sex:{
       type:String,
       required:true,
     },
     age:{
       type:Number,
       default:99, //默认值
     },
   }
 }
 </script>
 ​
 <style scoped>
   .demo{
     background-color: gray;
   }
 </style>

 

三种props方法

最简单的方法

 props:['name','age','sex']  //简单接收

 

接受的同时进行数据类型限制

 props:{
   name:String,
   sex:String,
   age:Number,
 }

 

接受的同时进行数据类型限制，对默认值进行指定，对必要性进行限制

props:{
   name:{
     type:String,  //类型是字符串
     required:true,  //是必须要传的
   },
   sex:{
     type:String,
     required:true,
   },
   age:{
     type:Number,
     default:99, //默认值
   },
 }

 

app组件对props进行传值

 <template>
   <div>
     <StudentMsg name="Lisi" sex="girl" :age=19 />
     <StudentMsg name="gugu" sex="boy" :age=22 />
   </div>
 ​
 </template>
 ​
 <script>
 import StudentMsg from "@/components/StudentMsg";
 export default {
   name: "App",
   components:{
     StudentMsg
   },
 ​
 }
 </script>

 

总结

/*
   配置项props：
     功能：让组件接受外部传来的数据
     1.传递数据：
       <demo name='xxx'/>
     2.接受数据：
       第一种方式：只接受
       props:['name']
 ​
       第二种方式：限制类型
       props:{
         name:String,
       }
 ​
       第三种方式：限制类型，限制必要性，指定默认值
       props:{
         name:{
           type:String,  //类型是字符串
           required:true,  //是必须要传的
         },
       }
 ​
       备注：props是只读的，vue底层会监测你对props的修改，如果进行了修改就会发出警告，
           若业务中确实需要修改，复制props的内容到data中，去修改data中的数据
 */