Vue.jsにおける親子関係

フロントエンドの作成にVue.jsを使い始めたのですが、コンポーネントの使い方について少し悩んだので簡単にメモ

Vue.jsの親子関係

結果

  • item1
  • item2
  • item3

処理の流れ

  1. 2行目, v-for内のitemsに対して親(app)からデータ(items)が渡る
  2. 2行目, :child=‘item'によって親のitemsの要素itemと子(child)内で宣言したprops(childという名前)が紐づく
  3. props子コンポーネントのテンプレート内で親のデータを利用を(child.name)といった形で利用可能になる
  4. 以上の処理をitemsについて繰り返し、テンプレートを作成

機械学習や関数型についても少しづつ書いていきたい