13.1 基本用法

keep-alive的使用只需要在动态组件的最外层添加标签即可。

  1. <div id="app">
  2. <button @click="changeTabs('child1')">child1</button>
  3. <button @click="changeTabs('child2')">child2</button>
  4. <keep-alive>
  5. <component :is="chooseTabs">
  6. </component>
  7. </keep-alive>
  8. </div>
  9. var child1 = {
  10. template: '<div><button @click="add">add</button><p>{{num}}</p></div>',
  11. data() {
  12. return {
  13. num: 1
  14. }
  15. },
  16. methods: {
  17. add() {
  18. this.num++
  19. }
  20. },
  21. }
  22. var child2 = {
  23. template: '<div>child2</div>'
  24. }
  25. var vm = new Vue({
  26. el: '#app',
  27. components: {
  28. child1,
  29. child2,
  30. },
  31. data() {
  32. return {
  33. chooseTabs: 'child1',
  34. }
  35. },
  36. methods: {
  37. changeTabs(tab) {
  38. this.chooseTabs = tab;
  39. }
  40. }
  41. })

简单的结果如下,动态组件在child1,child2之间来回切换,当第二次切到child1时,child1保留着原来的数据状态,num = 5

13.1 基本用法 - 图1