Vueで子コンポーネント（サブコンポーネント）を追加する時のまとめ
部品化みたいなことを考えた時に、この部分はひとくくりにして外出ししたい、と思うことはよくあるかと思います。
それをVueで行う際に、どうやればいいんだろ？というのを、手順を追いつつ、考えてみたんですが、まとめるとこういう流れになるのかなー、と。
親コンポーネント
- 親コンポーネント内に、新しく子コンポーネントを突っ込みたい。
- とりあえず、適当な子コンポーネント用のタグを<child></child>として、Parent.vue ファイル内の <template></template> に置いてみる。
<template>
<!-- Loop Start -->
<div v-for:・・・・>
親コンポーネント
<div>
<child></child>
</div>
</div>
<!-- Loop End -->
</template>
<script>
export default {
・・・
};
</script>と、
[Vue warn]: Unknown custom element: <child> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
と、当然エラーになる。（デベロッパーツール開いて、コンソール出力見てね。）
子コンポーネント
取りあえず、子コンポーネントの .vue ファイルを作ってみる。
<template>
<div>
子コンポーネント
</div>
</template>
<script>
export default {
・・・
};
</script>
これで、本体の Child.vue ファイルが出来ました、っと。
もっかい親コンポーネントに戻りまして…
そして、さきほど親の<template></template>部分で「ここで使いたいっ！」という要望は出せています。
が、Vue先生に何もお伝えしていないので、知らんぷりされてる状態。
なのでVue先生に、
- 子コンポーネントとして “child" を使いますっ！
- ファイルはココにありますっ！
というのを伝えます。親の Parent.vue ファイルはこうなりますよ、っと。
<template>
<!-- Loop Start -->
<div v-for:・・・・>
親コンポーネント
<div>
<child></child>
</div>
</div>
<!-- Loop End -->
</template>
<script>
import child from "./Child.vue"; /* 追加行 */
export default {
components: { child }, /* 追加行 */
・・・
};
</script>
これで、子コンポーネントが表示されるようになりました。
さて、次は親子コンポーネント間で値をやりとりしてみたい・・のですが、どうも Vuex を入れないと辛くなるようです。
という訳で、今回はこの辺で。