vue——动态组件、keep-alive

548 阅读1分钟

1.在vue的实例中,提供了一个内置的组件,专门用来实现动态组件的渲染,可以使组件在使用时不必写死。

具体用法:

//以在App组件中使用Left组件为例
//1.原来的组件使用,直接在App的<template></template>中以标签形式使用
<template>
    <Left></Left>
</template>
//2.使用动态组件后,改为下面所示
<template>
    <component is="Left"></component>
</template>

component相当于占位符,而is属性用来决定为谁占位,也就是is属性的值表示要渲染的组件

2.keep-alive:使组件保持被创建的状态,不使用时缓存起来

用法:

<template>
    <keep-alive>
        <component is='Left'></component>
    </keep-alive>
</template>

keep-alive对应的生命周期:

①当组件被缓存时,会自动触发组件的deactive生命周期函数

②当组件被激活时,会自动触发组件的active生命周期函数

keep-alvie组件的include和exclude属性:

①include属性:指定某个组件被缓存,多个组件使用(英文)逗号分隔,如下代码所示:

<template>
    <keep-alive include='Left,Right'>
        <component is='Left'></component>
    </keep-alive>
</template>

表示Left,Right组件被缓存

②exclude属性:排除谁不被缓存,用法与上面一样

注意:这两个属性不能同时使用