## 配置项props

## 配置项props

  功能：让组件收外部传过来的数据

    （1）转递数据：

        <Demo name:"xxx"/>

     (2)接收数据：

        第一种方式（只接收）：

          props:['name']

        第二种方式（限制类型）：

          props:{

            age:number

          }

        第三种（限制类型、限制必要性、指定默认值）

          props:{

            name:{

              type:String,//类型

              requored:true,//必要性

              default：'老王'//默认值

            }

          }

    备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的旋数据。

Student 组件

<template>

   <div>

    <h1>{{msg}}</h1>

    <h2>学生姓名：{{name}}</h2>

    <h2>学生性别：{{sex}}</h2>

    <h2>学生年龄：{{myAge+1}}</h2>

    <button @click="updateAge">修改年龄</button>

   </div>

</template>

<script>

   export default {

    name:'Student',

        data(){

            console.log(this);

            return {

                msg:'我是学生',

                myAge:this.age

            }

        },

        methods:{

            updateAge(){

                this.myAge++

            }

        },

        // 简单声明接收

        props:['name','sex','age']

        // 接收的同时对数据进行类型限制

        /* props:{

            name:String,

            age:Number,

            sex:String

        }*/

        // 接收的同时对数据：进行类型限制+默认值的指定+必要性的限制

     /*  props:{

        name:{

            type:String,//name的类型是字符串

            required:true//name是必要的

        },

        age:{

            type:Number,//age的类型是字符串

            default:99//默认值

        },

        sex:{

            type:String,

            required:true

        },

      }*/

    }

</script>

App组件

<template>

  <div>

    <Student name="李四" sex="女" :age="18"/>

   

  </div>

</template>

<script>

    import Student from './components/Student.vue'

    export default {

        name:'App',

        components: {Student},

       

    }

</script>

效果：