当前位置：首页 > news >正文

vue中component is和keepAlive组合使用

news 2025/9/11 22:05:23

component is用与动态渲染组件

组件基础 | Vue.js

<template><div style="padding: 30px"><button @click="change('1')">组件1</button><button @click="change('2')">组件2</button><button @click="change('3')">组件3</button><component :is="componentTag"></component></div>
</template>
<script>import component1 from './component1'import component2 from './component2'import component3 from './component3'export default {components: {component1, component2, component3},data() {return {componentTag: '',}},methods: {change(index) {this.componentTag = 'component' + index},}}
</script>
<style scoped>
</style>

传给 `:is` 的值可以是以下几种：

被注册的组件名
导入的组件对象

也可以使用 is attribute 来创建一般的 HTML 元素。

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。

keepAlive用于缓存组件信息

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive><component :is="activeComponent" />
</KeepAlive>

在组件切换时状态也能被保留了

包含/排除

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b"><component :is="view" />
</KeepAlive><!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/"><component :is="view" />
</KeepAlive><!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']"><component :is="view" />
</KeepAlive>

它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。