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

简介: Vue 中keep-alive组件将会被缓存
动态包裹哈
<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>
相关文章
|
13天前
|
JavaScript
Vue 父传子组件传参 defineProps
Vue 父传子组件传参 defineProps
|
13天前
|
JavaScript 前端开发
Vue 创建组件
Vue 创建组件
|
17天前
|
JavaScript
vue给table组件添加合计
vue给table组件添加合计
12 0
|
13天前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
29 0
|
1天前
|
存储 缓存 JavaScript
Vue的缓存组件 | 详解KeepAlive
Vue的缓存组件 | 详解KeepAlive
4 0
|
4天前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
12 0
|
9天前
|
JavaScript
vue 组件注册
vue 组件注册
|
9天前
|
JavaScript
vue 组件事件
vue 组件事件
|
17天前
|
JavaScript
组件中写选项的顺序(vue的问题)
组件中写选项的顺序(vue的问题)
|
1月前
|
缓存 NoSQL 安全
【Redis】缓存穿透
【Redis】缓存穿透
30 0