配置项props
    功能：让组件接收外部传来的数据。
        (1)传递数据：
           
        (2)接收数据：
            第一种方式(只接收)：
                props:['name']
            第二种方式(限制类型)：
                props:{
                    name:String
                }
            第三种方式(限制类型，限制必要性，指定默认值)
                props:{
                    name:{
                        type:String,  //类型
                        required:true,  //必要性
                        default:'老万'  //默认值
                    }
                }
        备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。


<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>学生年龄：{{myAge}}</h2>    
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>
<script>
export default {
    name:'Student',
    data(){
        // console.log(this)   //输出的vc，包含data内的msg，以及props内的name,age,sex
        return{
            msg:'我是饥荒Boss',
            myAge:this.age
            // name:'猪人小鸭子',
            // age:12,
            // sex:'男'
        }
    },
    
    // 第一种写法：简单声明，只接收
    // props:['name','age','sex']  
    // 第二种写法：限制类型
    // props:{
    //     name:String,
    //     age:Number,
    //     sex:String
    // },
    // 第三种写法：（限制类型，限制必要性，指定默认值）
    props:{
        name:{
            type:String,
            required:true,
        } ,
        age:{
            type:Number,
            default:23,
        } ,
        sex:{
            type:String,
            required:true
        }
    },
    methods:{
        updateAge(){
            this.myAge++
        }
    }
}
</script>

效果图：image