props配置的应用：

        在组件标签中配置了 <Student name="张三" sex="女" :age="18"/>

<template>
  <div>
 <School/>
 <hr>
 <Student name="张三" sex="女" :age="18"/>
  </div>
  
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name:'App',
  components:{School,Student},
}
</script>

在需要传值的组件中拿到传的值：

<template>
  <div>
    <h1>尚硅谷学生信息如下：</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ age+1 }}</h2>
  </div>
</template>

<script>
export default {
        name:'Student',
        data(){
            return {

            }
        },
        //接收数据的同时对数据类型进行现值
        /* props:{
            name:String,
            sex:String,
            age:Number
        } */

        props:{
          name:{
            type:String,  //控制类型
            required:true //name时必须要传的
          },
          sex:{
            type:String,  //控制类型
            required:true //sex时必须要传的
          },
          age:{
            type:Number,  //控制类型
            default:99 //不传时给予默认值
          },

        }

}
</script>

运行结果：     

配置项props

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

    （1）.传递数据：

            <Demo name="xxx"/>

            <Demo :age="xxx"/> //只传递引号里的值

    （2）.接收数据：

            第一种方式：（只接收）props:['name','age']

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

            props:{

                name:String,

                age:Number,

            }

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

            props:{

                 name:{

                    type:String,  //控制类型

                    required:true //name时必须要传的

                },

                age:{

                     type:Number,  //控制类型

                     default:99 //不传时给予默认值

          },

            }

    备注：props是只读的，vue底层会监测你对props的修改，如果进行了修改，就会发出警告，

    若业务需求确实需要修改，呢么复制props的内容到data中一份，然后去修改data中的数据。