当前位置: 代码迷 >> 综合 >> vue.js 动态组件缓存 keep-alive
  详细解决方案

vue.js 动态组件缓存 keep-alive

热度:68   发布时间:2023-12-21 08:56:15.0

参考:vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)

动态组件

在不同组件之间进行动态切换

比如:选项卡,点击不同的tab显示相应的组件。
注意:页面上只有当前选择的组件,而不是把所有的组件都列在页面上。

通过给组件添加 is 特性来实现。

如图

在这里插入图片描述

代码

html:

<!-- button按钮 -->
<div class="tabs"><button @click="toggleTab('tab1')">标签一</button><button @click="toggleTab('tab2')">标签二</button><button @click="toggleTab('tab3')">标签三</button>
</div><!-
  相关解决方案