IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      Vue动态组件渲染是怎么实现的?

      • 发布时间:
        2023-03-08
      • 版权所有:
        云和教育
      • 分享:

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

      data() {
        //1.当前要渲染的组件名称
        return { comName:'Left'}
      }
      
      <--2.通过is属性,动态指定要渲染的组件-->
      <component 
      :is="comName"></component>
      
      <--3.点击按钮,动态切换组件的名称-->
      <button @click="comName='Left'">展示 
      Left 组件</button>
      <button @click="comName='Right'">展示 Right 
      组件</button>

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

      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>

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

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

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

      keep-alive 的 include 属性

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

      <keep-alive include="MyLeft,MyRight">
        <component :is="comName"></component>
      </keep-alive>