如何理解Vue中的props?配置

如何理解Vue中的props 配置，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

<template>
  <div class="demo">
    <h2>{{ msg}}</h2>
    <h3>學生姓名：{{name}}</h3>
    <h3>學生性別：{{sex}}</h3>
    <h3>學生的年齡：{{myage+1}}</h3>
    <button @click="changeAge">點我修改數據</button>
  </div>
</template>

<script>
  export default {
    name: 'Student',
    data() {
      return {
        msg: '王者愛好者',
        myage:this.age
      }
    },
    methods: {
      changeAge(){
       this.myage=24
      }
    },
    //簡單接收
   // props:['name','age','sex']


    //接收的同時對數據進行類型的限制
    //  props:{
    //    name:String,
    //    age:Number,
    //    sex:String,
    //  }

//接收數據的同時對數據：進行類型的限定+默認值的指定+必要性的限制
  props: {
      name: {
        type: String, //name的類型
        required: true, //name是必要的
      },
      age: {
        type: Number, 
       default:22
      },
      sex: {
        type: String, 
        required: true
      }
 }

  }
</script>

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

<script>
  //引入Student組件
  import Student  from './components/Student.vue'
  export default {
    name: 'App',
    components: {
     Student
    }
  }

</script>

看完上述內容，你們掌握如何理解Vue中的props 配置的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！