vue.js---- keep-alive的使用

使用 is 特性来切换不同的组件的时候，为了保存不活动的组件的状态，也避免重复渲染带来的性能问题，需要使用 keey-alive 来缓存组件；

<!-- 失活的组件将会被缓存！-->

<keep-alive>

<component v-bind:is="currentTabComponent"></component>

</keep-alive>

父组件：

<template>
  <div class="all">
    <button @click="change('dog')">组件一</button> <button @click="change('pig')">组件二</button>
    <keep-alive>
      <component :is="comp"></component>
    </keep-alive>
  </div>
</template>
<script>
import dog from "../components/dog";
import pig from "../components/pig";
export default {
  data() {
    return {
      comp: "dog"
    };
  },
  components: { dog, pig },
  methods: {
    change(val) {
      this.comp = val;
    } }
};
</script>
<style lang='scss' scoped>
button {
  width: 70px;  height: 30px; margin-right: 10px;  user-select: none;
}
</style>

子组件一：

<template>
  <div style="background:blue;width:300px;height:260px;color:skyblue;">这是dog的独有场所</div>
</template>
<script>
export default {
    name:'dog',
  data() {
    return {};
  }
};
</script>

子组件二：

<template>
  <div class="all">
    <div class="title">
      <button :class="[which=='pig1'?'org':'']" @click="select('pig1')">文章一</button>
      <button :class="[which=='pig2'?'org':'']" @click="select('pig2')">文章二</button>
    </div>
    <div class="body">
      <component :is="which"></component>
    </div>
  </div>
</template>
<script>
import pig1 from "./pig1.vue";
import pig2 from "./pig2.vue";
export default {
  name: "pig",
  data() {
    return { which: "pig1" };
  },
  components: { pig1, pig2 },
  methods: {
    select(val) {
      this.which = val;
    }
  }
};
</script>

 孙子组件一，二，(就是文字不一样)

<template>
<div class="all">
    这个世界上有那么多的地方 
</div>
</template>