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

2018/10/20

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

それをVueで行う際に、どうやればいいんだろ?というのを、手順を追いつつ、考えてみたんですが、まとめるとこういう流れになるのかなー、と。

親コンポーネント

  • 親コンポーネント内に、新しく子コンポーネントを突っ込みたい。
  • とりあえず、適当な子コンポーネント用のタグを<child></child>として、Parent.vue ファイル内の <template></template> に置いてみる。

 

と、

と、当然エラーになる。(デベロッパーツール開いて、コンソール出力見てね。)

子コンポーネント

取りあえず、子コンポーネントの .vue ファイルを作ってみる。

 

これで、本体の Child.vue ファイルが出来ました、っと。

もっかい親コンポーネントに戻りまして…

そして、さきほど親の<template></template>部分で「ここで使いたいっ!」という要望は出せています。

が、Vue先生に何もお伝えしていないので、知らんぷりされてる状態。

なのでVue先生に、

  • 子コンポーネントとして “child” を使いますっ!
  • ファイルはココにありますっ!

というのを伝えます。親の Parent.vue ファイルはこうなりますよ、っと。

 

これで、子コンポーネントが表示されるようになりました。

さて、次は親子コンポーネント間で値をやりとりしてみたい・・のですが、どうも Vuex を入れないと辛くなるようです。

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