:isで動的にコンポーネントを変更する方法

:isで動的にコンポーネントを変更する方法

動的にコンポーネントを変更する方法としてv-ifを利用する方法がありますが、コンポーネントの数が増えてくると非常に手間になります。

その時に便利なのが:isを利用してパラメーターによってコンポーネントを変更する方法です。

例）テンプレート側

<div>

<!--ここで読み込むコンポーネントが動的に変わる-->
<component :is="currentHeader">

<slot></slot>
<footer>同じ内容</footer>
</div>

例）JS側

import IndexHeader from './IndexHeader.vue'
import SearchHeader from './SearchHeader.vue'
import ArchiveHeader from './ArchiveHeader.vue'

export default {
 props: ['currentHeader'],
 components: {
   Index: IndexHeader,
   Search: SearchHeader,
   Archive: ArchiveHeader
 }
}

jp.vuejs.org