Vue での props の使い方の紹介

<テンプレート>

  <div>

    <h3>私は {{name}}、年齢は {{age}}、趣味は {{hobby}} です。}</h3>、{{flag}}

  </div>

</テンプレート>



<スクリプト>

エクスポートデフォルト{

    名前:'Cpn',

    // シンプルな受信 /* props:['age','hobby','name'], */

    // 受信するデータを宣言し、props を宣言するときに受信データを制限します:{

        名前： {

            //型を宣言する type:String,

            //必須かどうかを宣言します: true、

            // デフォルト値を宣言する default:'デフォルト値'

        },

        年：{

            タイプ:数値、

            必要:true、

            デフォルト:18

        },

        趣味：

            タイプ:文字列、

            必要:false

        },

        フラグ：{

            タイプ:ブール値、

            必要:false

        }

    }

}

</スクリプト>

<テンプレート>

  <div id="アプリ">

    <!-- <cpn name='李明' age="22" hobby="ボール遊び"></cpn>

    <cpn name="Xiaohong" age="20" hobby="ピアノを弾くこと"></cpn> -->

    <cpn name='李明'></cpn>

    <cpn hobby="プログラミング" :flag="フラグ"></cpn>

      <!--注: 現在のコンポーネントデータ内のデータを子コンポーネントに渡す場合は、v-bing: 変数名 = "変数名" の形式で渡す必要があります。渡されるデータがデータ内にない場合は、バインディング命令、つまり v-bind (次のように省略できます) を追加する必要はありません -->

    <button @click="changeFlag">切り替え</button>

  </div>

</テンプレート>

<スクリプト>

'./components/Cpn.vue' から Cpn をインポートします。

エクスポートデフォルト{

  コンポーネント: { Cpn },

  名前:「アプリ」、

  データ（） {

    戻る {

      フラグ:false

    }

  },

  メソッド: {

    フラグを変更する(){

      console.log(このフラグ)

      this.flag=!this.flag;

      console.log(このフラグ)

    }

  },

}

</スクリプト>