#前提
コンポーネントを複数用意した際の切り替え方。
その際注意すること。
- __House__コンポーネント
- __Content__コンポーネント
- 親コンポーネント : App.vue
今回は__二つ__子コンポーネントを用意。
ボタンを押すことで二つの__コンポーネントを切り替える__ことができる。
__House__コンポーネント
House.vue
<template>
<div>
<p>House</p>
</div>
</template>
__Content__コンポーネント
Content.vue
<template>
<div>
<p>Content</p>
<input type="text">
</div>
</template>
<script>
export default {
destroyed() {
console.log('destoryed');
}
}
</script>
__親__コンポーネント
App.vue
<template>
<div>
<button @click="currentComponent = 'Content'">Content</button>
<button @click="currentComponent = 'House'">House</button>
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
</div>
</template>
<script>
export default {
data() {
return {
currentComponent: 'House',
};
},
}
<script>
##コンポーネントの切り替え
###keep-alive
- __keep-alive__タグ
- __component__タグ
- v-bind:is(:is)
keep-alive__のなかに__component__を__ネスト。
componentの中で__v-bind:is__を使って__プロパティを指定__すると完成。
App.vueではcurrentComponentプロパティにコンポーネントを値として挿入しているが、
__直接指定__も可能。
App.vue
//直接指定
<component :is="House"></component>
<component :is="Content"></component>
##ライフサイクルフック
###ライフサイクル
- activated
- deactivated
__keep-alive__を使用することによって__新たなライフサイクル__が二つ追加される。
- created
- destroyed
この二つをイメージするとわかりやすい。
###注意点
__異なる点__として、__毎回インスタンス化されない__ため、実際にcreatedやdestroyedされているわけではない。
そのため、inputなどに入力したデータは切り替え後も消えずに残る。
##参照
udemy講座 : https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/15371400#content
講師 : よしぴー(Yoshipi)さん