首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue动态组件

详解vue中的动态组件component和keep-alive

2023-11-30 11:23:55 作者：西瓜南瓜哈密瓜

这篇文章主要介绍了详解vue中的动态组件component和keep-alive的相关资料,这大家需要注意include属性和exclude属性只能用一个,不能同时使用,本文给大家介绍的非常详细,需要的朋友参考下吧

关于vue中的动态组件component和keep-alive

component标签是vue内置的，作用：组件的占位符

<component is="组件名称"></component>

其中is属性的值表示要渲染的组件的名字，也就是components节点下的组件名称

当我们动态切换组件名称时，每切换一次，组件就会被销毁一次，若不想让组件被销毁，则需要用到标签keep-alive

<keep-alive>
     <component is="组件名称"></component>
</keep-alive>

keep-alive可以把内部的组件进行缓存，而不是销毁组件

使用keep-alive标签后会生成两个新的生命周期：activated（组件被激活）、deactivated（组件被缓存）

注意：使用keep-alive标签后，组件第一次被显示时，既会执行created()也会执行activated()；当组件第二次显示时，只会执行activated()

keep-alive的include属性

<keep-alive include="组件名称，多个组件之间用英文的逗号分隔">
     <component is="组件名称"></component>
</keep-alive>

　　include表示：指定需要被缓存的组件，多个组件之间用英文的逗号分隔

keep-alive的exclude属性

<keep-alive exclude="组件名称，多个组件之间用英文的逗号分隔">
     <component is="组件名称"></component>
</keep-alive>

　　exclude表示：指定不需要被缓存的组件，多个组件之间用英文的逗号分隔

注意：include属性和exclude属性只能用一个，不能同时使用

补充：

vue动态组件＜Component＞与＜KeepAlive＞

<Component>

使用动态组件<Component>可以实现两个组件间来回切换，我们只需要传给is属性对应的组件名即可
当切换成另一个组件时候，当前组件会被销毁，另一个组件将被重新创建，原本示例上的数据不会保存

Dynamic.vue

<template>
    <div>
        <el-button-group>
            <el-button @click="componentName='DynamicA'">DynamicA</el-button>
            <el-button @click="componentName='DynamicB'">DynamicB</el-button>
        </el-button-group>
        <!-- 
            被传给 :is 的值是被注册的组件名
        -->
        <component :is="componentName"></component>
    </div>
</template>
<script>
import DynamicA from './DynamicA.vue';
import DynamicB from './DynamicB.vue';
export default {
    name: '',
    components: {
        DynamicA,
        DynamicB,
    },
    data() {
        return {
            componentName: ''
        }
    }
}
</script>
<style>
</style>

DynamicA.vue

<template>
    <div class="dynamicA">
        DynamicA
        <div>
            <el-button @click="count+=1">count+1</el-button>
            <!-- count的值在切换的过程中，并没有得到保存 -->
            count: {{ count }}
        </div>
    </div>
</template>
<script>
export default {
    name: 'DynamicA',
    components: {
    },
    data() {
        return {
            count: 0
        }
    },
    // 每次当组件被切换到时，此方法被调用了，说明当前组件实例又被重新创建了
    created() {
        console.log('DynamicA created');
    },
    // 每次当组件切换走时，此方法被调用了，说明当前组件实例已被销毁
    destroyed() {
        console.log('DynamicA destroyed');
    }
}
</script>
<style>
.dynamicA {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

DynamicB.vue

<template>
    <div class="dynamicB">
        DynamicB
        <el-input v-model="inputVal"></el-input>
    </div>
</template>
<script>
export default {
    name: 'DynamicB',
    components: {
    },
    data() {
        return {
            inputVal:''
        }
    },
    // 每次当组件被切换到时，此方法被调用了，说明当前组件实例又被重新创建了
    created() {
        console.log('DynamicA created');
    },
    // 每次当组件切换走时，此方法被调用了，说明当前组件实例已被销毁
    destroyed() {
        console.log('DynamicA destroyed');
    }
}
</script>
<style>
.dynamicB {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

在这里插入图片描述

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

在上面的例子中，当切换组件时，当前组件实例的数据并没有保存。但有的时候我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题，我们可以用 <KeepAlive> 内置组件将这些动态组件包装起来。