Vue.js propsを利用して親コンポーネントから子コンポーネントでパラメーターを渡す

Vue.js propsを利用して親コンポーネントから子コンポーネントでパラメーターを渡す

Vue.jsのpropsの使い方と簡単なサンプルコード。デザインにはbootstrapを使用してます。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1

※CentOS8にVue.jsの環境構築はこちら

フォルダ構成

サンプルコードのフォルダ構成です。

bootstrap-vueインストール

下記のコマンドでインストールしておきます

main.jsを下記の通り編集します。

propsサンプルコード

src/components配下に子コンポーネントとして、Human.vueを下記のコードで作成します。

次に親コンポーネントとなるsrc配下のApp.vueを作成します。

起動します

ブラウザから http://プライベートIP:8080 にアクセスすると、propsにより親コンポーネントから子コンポーネントである Human.vue にパラメータが渡されいることが確認できます。