vue中如何实现tabs切换不刷新,以avue-tabs为例
程序员文章站
2024-01-17 21:27:22
...
示例代码
下面展示一些 内联代码片
。
前端代码
<template>
<div class="main">
<avue-tabs ref="tabs" :option="tabs.option" @change="handleChange" />
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<qc-retrieval v-if="'1' === tabs.type.value" />
</keep-alive>
<keep-alive>
<qc-search v-if="'0' === tabs.type.value" />
</keep-alive>
</div>
</template>
标签使用如下:
使用失活标签包裹,可实现切换时刷新的问题:<keep-alive>
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<qc-retrieval v-if="'1' === tabs.type.value" />
</keep-alive>
注意这个 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。
上一篇: VUE tabs切换
下一篇: Python实现棋盘绘制(18*18)