Vue 中keep-alive组件将会被缓存

Posted 2020-11-26 iwishicould

动态包裹哈
<keep-alive>
  <component :is="comName"></component>
</keep-alive>

子组件

<template>
      <div>
        <h2>我是登录组件</h2>
      </div>
</template>
    
<template>
      <div>
        <h2>我是注册组件</h2>
      </div>
</template>
---------------
<template>
  <div class="mett-page">
    <h2>遇见问题</h2>
    <!-- 推荐这种写法-->
    <ul class="tab-tilte">
      <li
        :key="index"
        v-for="(title,index) in tabTitle"
        @click="getclcik(index)"
        :class="{active:cur==index}"
      >{{title}}</li>
    </ul>

    <div class="tab-content">
      <div v-for="(m,index) in tabMain" :key="index" v-show="cur==index">{{m}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabTitle: ["标题一", "标题二", "标题三", "标题四"],
      tabMain: ["内容一", "内容二", "内容三", "内容四"],
      cur: 0 //默认选中第一个tab
    };
  },
  methods: {
    getclcik(value) {
      this.cur = value;
    }
  }
};
</script>

<style scoped>
.mett-page .tab-tilte {
  display: flex;
  list-style: none;
}
.mett-page .tab-tilte > li {
  width: 50px;
  height: 40px;
}
</style>

引入组件

<template>
  <!-- is属相的使用 -->
  <div class="box">
    <div class="link-a" @click="comName='login'">登录</div>
    <div class="link-a" @click="comName='resgister'">注册</div>

    <div class="link-a" @click="comName='mett'">遇见问题</div>
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import login from "../../components/logincom/login";
import resgister from "../../components/logincom/register";
import mett from "../../components/logincom/mett";

export default {
  data() {
    return {
      comName: "login"
    };
  },
  components: {
    resgister,
    login,
    mett
  }
};


</script>

<style  scoped>
.box {
  display: flex;
}
.link-a {
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: pink;
  margin-left: 20px;
}
</style>