Vue 中keep-alive组件将会被缓存
2023-09-27 14:22:20 时间
动态包裹哈
<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>
相关文章
- vue组件之子组件和父组件
- Vue-CLI项目-vue-cookie与vue-cookies处理cookie
- vue组件样式穿透/deep/ ::v-deep >>>区别
- Vue 中通过事件总线方式组件间传递数据及调用 Vue脚手架中的axios数据调用方式获取github提供的用户接口数据信息
- 精品微信小程序ssm家教服务系统+后台管理系统|前后分离VUE
- 微信小程序宠物交易商城+后台管理系统|前后分离VUE
- vue.js:父子组件的实训案例
- vue.js:组件中数据的存放问题
- vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
- 138.(前端)数据统计显示图表——vue子组件的挂载与echarts基本效果实现
- vue组件传参
- 彻底理解Vue组件间通信(6种方式)
- Vue 组件通信方式
- vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件
- Vue组件通信之Bus
- Vue组件
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
- 将 Vue 组件库发布到 npm
- Vue组件化编程④
- vue 官方实例教程 markdown demo
- vue 项目级别工程搭建—引入使用booststrap4切换页面router-link(三)
- 【Vue 开发实战】实战篇 # 45:如何构建可交互的组件文档让代码高亮的显示在页面
- Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)
- 面试官:既然React/Vue可以用Event Bus进行组件通信,你可以实现下吗?
- 详解Vue组件系统
- Vue-book 2.0 一个移动端简单的全栈 web APP
- vue 资料合集
- Vue.js 系列教程 4:Vuex
- 开源一个用 vue 写的树层级组件 vue-ztree
- Vue 初接触实战之账单组件
- 基于vue+vuex+localStorage开发的本地记事本
- vue——路由守卫beforeEach,next(), next('/'), next({...to, repalce: true})说明及实例问题
- vue——sChart组件使用页面一片空白问题及示例
- js 实现vue—引入子组件props传参