为了学习今天的内容，我们先来做一个tab选项卡，模拟一个登录和注册的页面。我们先来实现一个简单的登录注册tab选项卡。

我们把登录和注册表单写成组件

这里是登录表单组件

  app.component('LoginForm',{
    template:`
      <form>
        账户：<input name="userNamer"/><br>
        密码：<input name="password" /><br>
        <input value="登录" type="submit" style="margin-top:10px" />
      </form>
    `
  })

然后是注册组件

app.component('RegisterForm',{
    template:`
      <form>
        账户：<input name="userNamer"/><br>
        密码：<input name="password" /><br>
        确认密码：<input name="password" /><br>
        <input value="注册" type="submit" style="margin-top:10px" />
      </form>
    `
  })

有了这两个组件之后我们就可以使用简单的v-if指令控制组件显示和隐藏来实现选项卡,添加一个变量showTab 当点击登录或者注册的时候切换showTab值就可以了。

 const app = Vue.createApp({
    data() {
      return {
        showTab:'login'
      }
    },
    methods: {
      switchTab(tab){
        this.showTab = tab 
      }
    },
    template: `
      <div>
        <span @click="switchTab('login')">登录</span>
        <span style="margin-left:30px" @click="switchTab('register')">注册</span>
      </div>
      <div style="margin-top:30px" >
        <LoginForm v-if="showTab=='login'" />
        <RegisterForm v-if="showTab=='register'"/>
      </div>
    `
  })

我们给选项卡添加一个选中颜色 声明的了一个tabActive用来设置选中样式。

<style>
  .tabActive{
    color: blue;
    font-weight: bold;
  }
</style>

然后根据showTab的值来给选项卡标签绑定class

<div>
    <span @click="switchTab('login')" :class="{tabActive:showTab=='login'}">登录</span>
    <span style="margin-left:30px" @click="switchTab('register')" :class="{tabActive:showTab=='register'}">注册</span>
</div>

可以得到效果

动态组件

我们的选项卡目前是通过切换组件的显示和隐藏来实现的，其实还有一种更方便的写法，就是利用动态组件来实现。

const app = Vue.createApp({
    data() {
      return {
        showTab:'LoginForm'
      }
    },
    methods: {
      switchTab(tab){
        this.showTab = tab 
      }
    },
    template: `
      <div>
        <span @click="switchTab('LoginForm')" :class="{tabActive:showTab=='LoginForm'}">登录</span>
        <span style="margin-left:30px" @click="switchTab('RegisterForm')" :class="{tabActive:showTab=='RegisterForm'}">注册</span>
      </div>
      <div style="margin-top:30px" >
       <Component :is="showTab" />
      </div>
    `
  })

Component 动态组件，我们只需要在它的is属性中传入指定组件的名称就可以实现动态组件的切换。我们给我switchTab方法传入了组件名称把组件名称赋值给showTab变量，然后把showTab绑定到Component组件的is属性上。

状态保持

首先我们看一个问题，当我们在登录表单里面输入了账号密码，然后我们又把选项卡切换到注册，然后再切回登录表单时，我们会发现之前填入的账号密码内容被重置了。这是我们的组件被重新渲染了所造成的，有时候我们并不希望它重置的我们的内容，而是希望我们选项卡切换回来的时候还是原来的内容。要实现这种需求我们就的使用到状态保持。

 <keep-alive>
    <Component :is="showTab" />
 </keep-alive>

使用<keep-alive>标签包裹住我们的组件，这样相当启用了缓存，它会把我们组件的状态缓存起来。比如它input框的值存了起来，在需要的时候它会把数据还原回去。

状态保持在我们实际开发中使用到的情况还是很多的，我们在使用动态组件时，经常配合<keep-alive>标签一起使用。特别是在路由切换的过程中。

稍微给大家一个小提示：我们上面的演示中，并不是说<keep-alive>需要配和<Component/>来使用，而是可以用它来包裹你所有你需要状态保持的组件。这里主要是怕大家理解错。

像我们最开始的写法也是可以使用<keep-alive>来实现状态保持的，大家不要一根筋理解错了

<keep-alive>
   <LoginForm v-if="showTab=='login'" />
</keep-alive>

<keep-alive>
   <RegisterForm v-if="showTab=='register'"/>
</keep-alive>