Student.vue

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{myAge}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <button @click="changeAge">尝试修改年龄</button>
  </div>
</template>

<script>

export default {
    name:'Student',
    data(){
        return {
            msg:'我是一个尚硅谷的学生',
            myAge:this.age
        }
    },
    //简单声明接受
    // props:['name','age','sex'],
    //接受的同时对数据：进行类型限制、默认值指定、必要性限制
    props:{
      name:{
        type:String,
        required:true
      },
      age:{
        type:Number,
        default:99
      },
      sex:{
        type:String,
        required:true
      }
    },
    methods:{
      changeAge(){
        this.myAge++;
      }
    }
}
</script>

App.vue

<template>
  <div>
    <Student name="张三" :age="18" sex="女"/>
    <hr>
    <Student name="李四" :age="32" sex="男"/>
    <hr>
    <Student name="王五" :age="63" sex="女"/>
    <hr>
  </div>
</template>

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

<style>

</style>