Vue.jsのコンポーネントがわからなかったからこう理解した

Abstract

Vue.jsの公式ドキュメントは非常にわかりやすいのですが、それでもコンポーネントの理解ができなかったので自分なりにこう理解したというメモです。

そしてこの記事を書いている時には理解ができているので
なんでこんな事で悩んだんだろうという気持ちです。

公式の説明

公式ドキュメントより

<div id="app-7">
  <ol>
    <!-- 
      各 todo-item の内容を表す todo オブジェクトを与えます。
      これにより内容は動的に変化します。
      また後述する "key" を各コンポーネントに提供する必要があります。
    -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

何がわからなかったか

    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>

この一文です。

v-for:item in groceryList

これを書けばループになるので

v-bind:todo="item"

は不要なのではと思ったのです。
今考えるとほんと何なのか。

こう考えた

こういう流れで分解されているのではと考えました

1

最初の状態

<div id="app-7">
  <ol>
    <todo-item v-bind:todo="item" v-for="item in groceryList"></todo-item>
  </ol>
</div>

2

まずtodo-itemが指定したtemplateの中身に置換される

<div id="app-7">
  <ol>
    // v-bind:todo="item" v-for="item in groceryList"
    <li>{{ todo.text }}</li>
  </ol>
</div>

3

残ったプロパティのループが上にきて
その下にtodoにitemをバインドする
ループも閉じられている

<div id="app-7">
  <ol>
    // v-for="item in groceryList"
    // v-bind:todo="item"
    <li>{{ todo.text }}</li>
    // end for
  </ol>
</div>

4

完成

<div id="app">
  <ol>
    <li>Vegetables</li>
    <li>Cheese</li>
    <li>Whatever else humans are supposed to eat</li>
  </ol>
</div>

理解できた気がする

この先さらにこのポーネントを活用していく事になると思いますが
この度の考え方を利用して、精進していこうと思います。