【vue2】05_动态组件 & 插槽 & 自定义指令

动态组件

1. 什么是动态组件

动态组件指的是动态切换组件的显示与隐藏

2. 如何实现动态组件渲染

vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染。示例代码如下:


data() {
// 当前要渲染的组件名称
  return {
    comName: 'Right'
  }
}

<!-- componet 标签是vue 内置的作用: 组件的占位符 -->
<!-- is 属性的值,表示要渲染的组件的名字 -->
<component :is="comName"></component>

<button @click="comName = 'Left'">展示 Left</button>
<button @click="comName = 'Right'">展示 Right</button>

3. 使用 keep-alive 保持状态

默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 keep-alive 组件保持动态组
件的状态。示例代码如下:

<!-- keep-alive 可以把内部的组件进行缓存,而不是销毁组件 -->
<keep-alive>
  <component :is="comName"></component>
</keep-alive>

4. keep-alive 对应的生命周期函数

当组件被缓存时,会自动触发组件的deactivated生命周期函数。
当组件被激活时,会自动触发组件的 activated 生命周期函数。

export default {
   
  created() {
   console.log('left 组件被创建了')},
  destroyed() {
   console.log('left 组件被销毁了')},
  activated() {
   console.log('组件被激活了,activated')},
  deactivated() {
   console.log('组件被缓存了,deactivated')}
}

5. keep-alive 的 include 属性

include 属性用来指定:只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔:

<!-- 在使用 keep-alive 的时候, 可以通过 include 指定哪些组件需要被缓存 -->
<!-- 或者, 可以通过 exclude 指定哪些组件不需要被缓存 不能同时使用两者-->
<keep-alive include="Left,Right">
  <component :is="comName"></component>
</keep-alive>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值