props配置

配置项props

功能：让组件接收外部传过来的数据【相当于微信转账：有一个转账人转钱给接收者，接收者需要确认接收】

（1）传递数据：

            <Demo name="xxx">

（2）接收数据：

         第一种方式（只接收）

            props:['name']

         第二种方式（限制类型）

             props:{

                name:{

                  type:String, //类型

                  required:true, //必要性

                  defalt:'老王'   //默认值}}

备注：props是只读，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告。若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。【此时需要修改的属性在data中的名字不能与props中的名字一样。否则它会优先执行props中的。】

 

App.vue

<!--App组件结构-->
<template>
    <div>
<!--动态绑定age，传到Student的就是数字而不是字符串-->
<!--这边用了两次组件。分别是李四和张三的信息。其中一个人数据变化并不影响另一个人的-->
        <Student name="李四" sex="女" :age="18"></Student>
        <Student name="张三" sex="男" :age="19"></Student>
    </div>
 </template>
  
  
<script>
    import Student from './components/Student.vue'
 
    export default{
        name:'App',
        components:{
           Student
        }
     }
</script>

 

Student.vue

<template>     
        <div>
              <h1>{{msg}}</h1>
              <h2>学生姓名：{{name}}</h2>
              <h2>学生性别：{{sex}}</h2>
              <h2>学生年龄：{{age}}</h2>
              <button @click="updateAge">尝试修改年龄</button>
        </div>
 </template>
  
 <!-- name:'Student'命名组件名为Student。<script>中包含可以交互的。比如data、methods、watch、computed-->
<script>
<!--暴露结构以便导入-->
      export default{      
             name:'Student',   
             data(){
                  return{
                     msg:'我是一个学生',
                     myAge:this.age
                   }
             },
<!--如果要修改数据，只能在data中修改myAge。若有业务需求年龄自动加1，则this.myAge++-->
             methods:{
                       this.myAge
                    }
             <!--简单接受-->
              props:['name','age','sex']

/*接受的同时对数据进行类型限制
               props:{
                   name:String,
                   age:Number,
                   sex:String}*/

/*接受的同时对数据：进行类型限制+默认值的指定+必要性的限制
                  props:{
                    name:{
                       type:String,
                       required:true    //name是必须要的
                    },
                    age:{
                       type:Number,
                       default:99    //没有传age，默认99
                    },
                    sex:{
                       type:String,
                       required:true    //sex是必须要的
                    }}*/
         }，
</script>