Vueの動的コンポーネントで爆詰まりした

Vueの<component>コンポーネント

動的にコンポーネントを切り替える必要があったので、vue dynamic componentと検索してヒットした公式のガイド通り<component>を使ってみたが、プロパティの指定方法で詰まった挙句、別の方法で実装した。

<component>の欠陥

<component>の:isでコンポーネントを指定したはいいものの、そのコンポーネントではプロパティを要求していた。もちろん<component>では細かな操作ができるはずもなく、この記事のように全くスマートではない方法で実装する必要がある。しかも当環境で実装してもやたらエラーが発生してろくに使えない。

v-if

動的コンポーネントで検索して公式がああ言ってるのだから、これ以外じゃ方法がないと思い込んでたので、にっちもさっちもいかなくなった。仕方がないので後回しにして他のコンポーネントを実装していった。v-ifディレクティブを見つけた。

条件付きレンダリング

言うまでもないが、v-ifで指定した理論値がtrueの場合、コンポーネントをレンダリングするディレクティブである。

<div>
      <hoge v-if="content === 'hoge'" :hoge="hoge"></hoge>
      <fuga v-if="content === 'fuga'" @fuga=”fuga"></fuga>
      <piyo v-if="content === 'piyo'"></piyo>
</div>

contentが特定の文字列に一致した場合にのみコンポーネントが生成しレンダリング、一致しなくなったコンポーネントは破棄されるようになる。タブを使ったUIでも十分に機能するだろう。

<component>はいつ使うのか

多分一生訪れない。<component>を使うケースあればコメントしてください。