zoukankan      html  css  js  c++  java
  • 动态组件使用详解

    <component v-bind:is="currentTabComponent"></component>

    何为动态组件,如上代码所示,即利用 is 特性,来切换不同的组件,即为动态组件。

    动态组件保持状态

    有时候,我们希望能保持被动态加载组件的状态,已避免反复重复渲染导致的性能问题。为了能实现保持组件状态的功能,我们可以用一个 <keep-alive> 的元素将其动态组件包裹起来。

    <!-- 失活的组件将会被缓存!-->
    <keep-alive>
      <component v-bind:is="currentTabComponent"></component>
    </keep-alive>

    虽然用keep-alive会缓存组件,但是也同样带来了问题,就是当我们第二次进入页面时,组件的created和mounted函数不再触发

    对于这一问题,有两个解决方案:

    • 增加activated()函数,每次进入新页面的时候再获取一次数据
    • 在keep-alive中增加一个过滤exclude:name(组件的name)这个方法适用于其中单个
    <keep-alive exclude="name">
      <component v-bind:is="currentTabComponent"></component>
    </keep-alive>

    这样,我们就可以在每次进入页面的时候去初始化该页面的数据了。

  • 相关阅读:
    简单的代码
    js精度缺失问题
    maven将Jar安装进仓库
    上传图片,手机端压缩
    处理登录时,AJAX的状态码无权限情况
    处理html换行问题
    VMWARE网络配置内网与外网互ping
    hbase和ZooKeeper集群安装配置
    Hadoop集群部署
    redis主从配置+sentinel哨兵
  • 原文地址:https://www.cnblogs.com/00feixi/p/11810181.html
Copyright © 2011-2022 走看看