动态组件和 keep-alive

动态组件和 keep-alive

//组件一
<template>
  <div>
    组件一
    <input type="text" />
    <input type="text" />
  </div>
</template>
<script>
export default {
  name: "cona",
  data() {
    return {};
  },
};
</script>
//组件二
<template>
  <div>
    组件二
    <input type="text" />
    <input type="text" />
  </div>
</template>
<script>
export default {
  name: "conb",
  data() {
    return {};
  },
};
</script>
<style lang='less'>
</style>

在下面这个组件中调用上面两个组件，使用动态组件进行切换时会销毁掉不活动的组件。当使用keep-alive后，会缓存不活动的组件实例，而不是销毁它们。

<template>
  <div id="parent">
    <!-- <keep-alive>可以使失活的组件保留数据，有三个参数：include/exclude 后面是组件名称（name）或者正则表达式 -->
    <!-- <keep-alive include='cona'>    -->
    <keep-alive :include="/cona/">
      <component :is="comId"></component>
    </keep-alive>
    <button @click="fa">a</button>
    <button @click="fb">b</button>
  </div>
</template>
<script>
import aaa from "./con1";
import bbb from "./con2";
export default {
  name: "parent",
  data() {
    return {
      comId: aaa,
    };
  },
  methods: {
    fa() {
      this.comId = aaa;
    },
    fb() {
      this.comId = bbb;
    },
  },
};
</script>

keep-alive：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
• max - 数字。最多可以缓存多少组件实例。