Vue.js/Nuxt.jsで複数のComponentを別コンポーネントでまとめてそれをさらに別のコンポーネントに渡す方法

2022/10/8 2022/10/18 JavaScript, プログラミング

どうやって表現すれば良いかよくわからなかったので謎のタイトルにしていますが、「Vue.js/Nuxt.js。あるComponentを別コンポーネントでまとめてそれをさらに別のコンポーネントに渡す方法」についてブログに記憶を残したいと思います。

1 今回想定するVue.js/Nuxt.jsの構成
2 各Componentファイルの記述内容
3 まとめ

今回想定するVue.js/Nuxt.jsの構成

今回想定するVue.js/Nuxt.jsの構成は以下の通りです。

child/A1.vue
child/A2.vue
child/A3.vue
child/A4.vue
child/A5.vue
child/A6.vue
child/A7.vue
child/A8.vue
child/A9.vue
child/A10.vue
Group.vue------->ここでchildディレクトリ配下のComponentをまとめる
Item.vue------->group.vueをここでimportする

あんまりないケースなのかもしれませんが・・・

各Componentファイルの記述内容

それでは、各Componentファイルの記述内容について書いていきたいと思います。

まずは、Group.vueです。

<script>
import A1 from './child/A1'
import A2 from './child/A2'
import A3 from './child/A3'
import A4 from './child/A4'
import A5 from './child/A5'
import A6 from './child/A6'
import A7 from './child/A7'
import A8 from './child/A8'
import A9 from './child/A9'
import A10 from './child/A10'

export default {
  components: {
    A1,
    A2,
    A3,
    A4,
    A5,
    A6,
    A7,
    A8,
    A9,
    A10,
  },
}
</script>

続いて、Item.vueです。

<script>
import Group from './Group'


export default {
  components: {
    Group
  },
}
</script>

あとは、Item.vue上のなんらかのmethod上で、

this.Group.components.A1

みたいな感じにしてあげれば、A1コンポーネントを使用することができます。

まとめ

ということで、Vue.js/Nuxt.jsで複数のComponentを別コンポーネントでまとめてそれをさらに別のコンポーネントに渡す方法について簡単にブログに書いてみました。

動的に表示Componentを切り替えたいけど対象のComponentが多すぎるなんていうときに使える方法かもしれません。

arrown39