Detailed explanation of Vue's props configuration

<template>
  <div class="demo">
    <h1>{{ msg}}</h1>
    <h2>Student name: {{name}}</h2>
    <h2>Student gender: {{sex}}</h2>
    <h2>Student's age: {{myage+1}}</h2>
    <button @click="changeAge">Click me to modify data</button>
  </div>
</template>

<script>
  export default {
    name: 'Student',
    data() {
      return {
        msg: 'King's Lovers',
        myage:this.age
      }
    },
    methods: {
      changeAge(){
       this.myage=24
      }
    },
    //Simple reception// props:['name','age','sex']


    //Restrict the data type while receiving // props:{
    // name:String,
    //age:Number,
    // sex:String,
    // }

//While receiving data: limit the type + specify the default value + restrict the necessity props: {
      name: {
        type: String, //name type required: true, //name is required},
      age: {
        type: Number, 
       default:22
      },
      sex:
        type: String, 
        required: true
      }
 }

  }
</script>

<template>
  <div>
    <Student name="张三" sex="男" :myage="20"/>
  </div>
</template>

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

</script>