基本使用

当我们在一个多标签的界面中，在不同组件之间进行动态切换是非常有用的。
示例 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../src/vue.js"></script>
  9. </head>
  11. <body>
  12.     <section id="app">
  13.         <button v-for='page in pages' :key='page.id' @click='pagesActive = page.cmp'>{{page.name}}</button>
  14.         <component :is='pagesActive'></component>
  15.     </section>
  16.     <script>
  17.         Vue.component('base-post', {
  18.             data(){
  19.                 return{
  20.                     posts:[
  21.                         { title: "标题1", content: { template: `<div>内容1</div>`}, id: 11}, 
  22.                         { title: "标题2", content: { template: `<div>内容2</div>`}, id: 12}, 
  23.                         { title: "标题3", content: { template: `<div>内容3</div>`}, id: 13}, 
  24.                     ],
  25.                     postsActive:'',
  26.                 }
  27.             },
  28.             created(){
  29.                 this.postsActive = this.posts[0].content
  30.             },
  31.             template: `
  32.             <div>
  33.                 <button v-for='post in posts' :key='post.id' @click='postsActive = post.content'>{{ post.title}}</button>
  34.                 <component :is='postsActive'></component>
  35.             </div>
  36.             `
  37.         })
  38.         Vue.component('base-more', {
  39.             template: `
  40.             <div>更多</div>
  41.             `
  42.         })
  43.         const vm = new Vue({
  44.             el: "#app",
  45.             data: {
  46.                 pages: [{
  47.                         name: '博客',
  48.                         cmp: 'base-post',
  49.                         id: 0
  50.                     },
  51.                     {
  52.                         name: '更多',
  53.                         cmp: 'base-more',
  54.                         id: 1
  55.                     }
  56.                 ],
  57.                 pagesActive:'base-post'
  58.             }
  59.         });
  60.     </script>
  61. </body>
  63. </html>

效果图
QQ录屏20210222163223.gif
通过上面方法，我们可以实现组件间的切换，能够注意到的是：每一次切换标签时，都会创建一个新的组件实例，重新创建动态组件在更多情况下是非常有用的，但是在这个案例中，我们会更希望哪些标签的组件实例能够在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个<keep-alive>元素将动态组件包裹起来。如：

  1. <keep-alive>
  2.     <component :is='pagesActive'></component>
  3. </keep-alive>

注意：<keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。
效果如下
QQ录屏20210222162623.gif
使用啦 keep-alive 后你会效果图中，博客与更多按钮直接的切换不会让博客按钮恢复到初始状态，博客按钮下的初始状态为输出标题1的内容，但是我点击标题三后再让博客与更多两个按钮切换选中效果后回到博客按钮的触发的效果，你会发现它展示的标题三的内容