Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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>

理解できた気がする

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away