動的コンポーネントって？

はじめに

業務でVueを使っており、「動的コンポーネント」という概念が原因でうまくタスクが進まなかったことがあった

具体的には、共通JSであるapp.jsに書いたjQueryが、Vueから呼び出せない、という事象

尚、Vueではv-forを使っていた

当時の実装イメージ

イメージとしては、Vue側でjQueryを発火させるためのセレクタを設定し

      <ul>
      <li
        v-for="item in items" // v-for使用
        :key="item.id"
      >
                <a
          href=""
          @click.prevent.stop="hoge"
          id="selector"
        >
        URL
        </a>
      </li>
    </ul>

以下のようにjQueryでaタグがクリックされたらイベントを検知して処理をする

app.js

$('#selector').on('click', function(){
    console.log('clicked!!');
    // クリック時の処理
});

そして、コンポーネントを使っているblade(HTML)でapp.jsを読み込んでいる、という状況

<link rel="stylesheet" href="./app.js">

これでaタグをクリック時にconsoleに’clicked!!’が表示されるはずが、されない、という困りごと

※本筋ではないので適当に書いてます。あくまでイメージです。

相談の結果…

煮詰まった結果、先輩に相談させてもらって対応。そこで、今回の原因は

「app.jsの読み込み時に動的コンポーネント内のDOMが生成されていないからだね」

と言われた。

全くピンと来ておらず、特に「動的コンポーネント」ってのが不明でそれ以降が頭に入らなかった…

ということでタイトルの疑問に至った、という背景

結論

調べた結果、要は

動的にDOMの内容が切り替わるコンポーネント

のこと

こちら)に具体例があったのですが

• v-if / v-show
• is
• v-for

などを使って状況に応じてDOMの生成を切り替えるコンポーネントのことをいう、という理解でした。

おわりに

• 本当は「動的コンポーネントとは？」より「なぜ動的コンポーネントはapp.jsを読み込めないのか？」という点を深堀した方が圧倒的にタメになるのですが、「動的コンポーネント」の言葉があいまいな理解だったので、ワンクッション置きました。
• 別途「なぜ動的コンポーネントはapp.jsを読み込めないのか？」については深堀します。