動的コンポーネントとは？
一つのタグの記述でコンポーネントを動的に切り替える事ができる機能です。動的コンポーネントを使わない場合はv-if等でコンポーネントを複数記述する必要がある場合に比べると非常にすっきり記述する事が可能になります。
書き方
data内容はその画面内でボタンクリック等の何かをトリガーにして切り替えるようにします。なお、切り替えたいコンポーネントは事前にソース内にimportしておく必要があります。
|
1 2 3 4 |
<component :is="コンポーネント名を格納したdata"></component> import 切り替えたいコンポーネント名1 from 'コンポーネントパス'; import 切り替えたいコンポーネント名2 from 'コンポーネントパス'; |
componentタグにis属性を使えば実現できます。(内部的にはv-bindで付与しています。)
注意点
コンポーネントを切り替える度にVueインスタンスがdestroyされて再生成される点です。もし、片方のコンポーネントで入力データを保持するような作りになっていたらそのデータも消えてしまいます。
対処法
Vue.jsには対処方法が用意されています。結論としては動的コンポーネントをkeep-aliveタグで囲います。囲うことで全てのデータがキャッシュされるようになります。
|
1 2 3 |
<keep-alive> <component :is="コンポーネント名を格納したdata"></component> </keep-alive> |
ただ、これをしてしまうと本来のdestroyやcreatedに該当するライフサイクルを実行できなくなってしまいますよね。そのためにVue.jsではkeep-aliveタグで囲った時だけ新たなライフサイクルフックを用意していてくれます。
activated
createdの代わりになるライフサイクルフックです。
|
1 2 3 4 5 6 7 8 9 10 |
<template> <p>home</p> </template> <script> export default { activated() { console.log("activated"); } }; </script> |
deactivated
destoryの代わりになるライフサイクルフックです。
|
1 2 3 4 5 6 7 8 9 10 |
<template> <p>home</p> </template> <script> export default { deactivated() { console.log("deactivated"); }, }; </script> |
この記事へのコメントはありません。