Vue复习：keep-alive动态组件的使用

1、动态组件

<component>元素上动态的绑定多个组件到它的is属性，就能够实现不同组件之间的切换，效果类似于通过使用大量的v-show去显示或隐藏某些组件。

  <div id="demo">
    <div>
      <component :is="name"></component>
    </div>
    <div class="footer">
      <span @click="name = 'componentA'">组件A</span>
      <span @click="name = 'componentB'">组件B</span>
      <span @click="name = 'componentC'">组件C</span>
    </div>
  </div>

<script>
import componentA from "./componentA.vue";
import componentB from "./componentB.vue";
import componentC from "./componentC.vue";
export default {
  name: "demo",
  components: {
    componentA,
    componentB,
    componentC,
  },
  data() {
    return {
      name: "componentA",
    };
  },
};
</script>

2、上述方式存在的问题

定义的name变量，然后可以动态的去给不同的组件的名字赋值达到动态切换的效果，但是此时仍然存在一个弊端，就是目前组件的状态是不会保留的！
比如，组件A中存在一个表单，然后用户填写表单的值写了大半天，切换到组件B去看了下，当再切回组件A时，这时组件A先前的表单的状态是重置了的。

3、keep-alive保留组件的状态

      <keep-alive>
        <component :is="name"></component>
      </keep-alive>