父組件home如下：
<template>
<div class="home">
<div>
<button @click="buttonClick(item.name)" v-for="(item) in buttons" :key="item.name">{{item.value}}</button>
</div>
<div>
<keep-alive include="books">
<component :is="viewFirst"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import books from '../components/books.vue'
import notebooks from '../components/notebooks.vue'
import pens from '../components/pens.vue'
export default {
name: 'home',
data () {
return {
buttons: [
{
name: 'books',
value: 'books'
},
{
name: 'notebooks',
value: 'notebooks'
},
{
name: 'pens',
value: 'pens'
}
],
componentArray: [
{
'books': 'books'
},
{
'notebooks': 'notebooks'
},
{
'pens': 'pens'
}
],
viewFirst: 'books'
}
},
components: {
books, notebooks, pens
},
methods: {
// tab選項
buttonClick (name) {
this.viewFirst = name
}
}
}
</script>
子組件之一books如下：
<template>
<div class="books">
<button @click="clickOne">點擊一</button>
</div>
</template>
<script>
export default {
name: 'books',
data () {
return {
clickOneDate: 1
}
},
methods: {
clickOne () {
this.clickOneDate = 2
}
}
}
</script>
說明：以上是三個選項卡，默認是name是books的按鈕選中，當然對應的是name是books的組件顯示。此處只對books組件里面的數據進行了緩存，里面的clickOneDate數據默認是1，點擊后成為2。當再點擊notebooks或者pens后，再點擊books,這時clickOneDate的值還是2。如果還緩存其他組件，只要在home里面的include的值里面用逗號隔開加上即可，如include="books ，notebooks"。
另外：動態組件 is 了解下。
還有：keep-alive的用途還有其他場景，參考官網：
https://cn.vuejs.org/v2/api/#keep-alive。
最后：vue路由結合keep-alive相當實用，后續總結。
分享個人qq群鏈接:255909991