Vueで子コンポーネント(サブコンポーネント)を追加する時のまとめ

2018/10/20

部品化みたいなことを考えた時に、この部分はひとくくりにして外出ししたい、と思うことはよくあるかと思います。

それを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 を入れないと辛くなるようです。

という訳で、今回はこの辺で。