Vue 动态组件缓存(vue-cli)

App.vue

<template>
  <div id="app">
    <!-- keep-alive保证这种需要输入的标签中的内容缓存不被销毁 -->
    <keep-alive>
      <!-- 这里的componentxx名字随便取 -->
      <component :is="componentxx"></component>
    </keep-alive>
    <br />
    <button @click="componentxx='A'">change to A</button>
    <button @click="componentxx='B'">change to B</button>
  </div>
</template>

<script>
import A from "./components/A";
import B from "./components/B";

export default {
  name: "app",
  components: {
    A,
    B
  },
  data() {
    return {
      componentxx: "A"
    };
  }
};
</script>

component-->A.vue

<template>
  <div class="a">
    <h2>A component</h2>
    <input type="text" />
  </div>
</template>

component-->B.vue

<template>
  <div class="b">
    <h2>B component</h2>
    <input type="text" />
  </div>
</template>

效果图:

a.gif