vue选项卡切换，某个组件缓存数据keep-alive demo
父组件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
