回答編集履歴
1
表現修正
test
CHANGED
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
});
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
`ListViewer`には表示する
|
|
16
|
+
`ListViewer`には表示するリストの情報が必要ですから、これを受け取るプロパティを`props`で用意します。
|
|
17
17
|
```js
|
|
18
18
|
Vue.component('ListViewer', {
|
|
19
19
|
name: 'ListViewer',
|
|
20
|
-
props: ['listData'], //
|
|
20
|
+
props: ['listData'], //リストを受け取るプロパティ
|
|
21
21
|
});
|
|
22
22
|
```
|
|
23
23
|
次に、コンポーネントの部品の構成を`template`で定義します。このとき、`<ListViewer>`、つまり自分自身をコンポーネントの部品として組み込むことで、階層構造にすることができます。
|
|
24
24
|
|
|
25
25
|
`<ListViewer>`は配列の要素の数だけ必要ですから、`v-for`を使って繰り返し生成します。
|
|
26
|
-
そして、生成した各コンポーネントのプロパティに、`v-bind:listData="…"`で配列の
|
|
26
|
+
そして、生成した各コンポーネントのプロパティに、`v-bind:listData="…"`で配列の各要素を渡します。(`v-bind:`は`:`に省略できます)
|
|
27
27
|
```js
|
|
28
28
|
Vue.component('ListViewer', {
|
|
29
29
|
name: 'ListViewer',
|