Vueのprops設定の詳細な説明

<テンプレート>
  <div class="demo">
    <h1>{{ メッセージ}}</h1>
    <h2>生徒名: {{name}}</h2>
    <h2>学生の性別: {{sex}}</h2>
    <h2>生徒の年齢: {{myage+1}}</h2>
    <button @click="changeAge">データを変更するにはクリックしてください</button>
  </div>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: '学生'、
    データ（） {
      戻る {
        メッセージ: 「キングの恋人」
        myage:this.age
      }
    },
    メソッド: {
      年齢を変更する(){
       私の年齢=24
      }
    },
    //シンプルな受信// props:['name','age','sex']


    //props を受け取る際にデータ型を制限する:{
    // 名前:文字列、
    //年齢:数値、
    // 性別:文字列、
    // }

//データ受信時: 型を制限 + デフォルト値を指定 + 必要性を制限する props: {
      名前： {
        type: String、//名前タイプ必須: true、//名前は必須}、
      年： {
        タイプ: 数値、 
       デフォルト:22
      },
      性別:
        タイプ: 文字列、 
        必須: true
      }
 }

  }
</スクリプト>

<テンプレート>
  <div>
    <学生名="张三" 性別="男" :年齢="20"/>
  </div>
</テンプレート>

<スクリプト>
  //Student コンポーネントをインポートしますimport Student from './components/Student.vue'
  エクスポートデフォルト{
    名前: 'アプリ'、
    コンポーネント:
     学生
    }
  }

</スクリプト>