zoukankan      html  css  js  c++  java
  • vue组件懒加载(Vue Lazy Component )

    1.介绍:是vue组件懒加载的预估插件组件。支持组件组件延时加载, 加载真实组件前展示骨架组件,提高用户体验,真实组件代码分包异步加载

    // 安装 
    
    npm install @xunlei/vue-lazy-component
    
    // 使用方式一
    
    // main.js文件中全局注册使用
    
    import VueLazyComponent from '@xunlei/vue-lazy-component'
    
    Vue.use(VueLazyComponent)
    
    
    // 使用方式二
    
    // 在组件中实现局部注册组件
    
    
    import { component as VueLazyComponent } from '@xunlei/vue-lazy-component'
    
    export default {
    
      components: {
        'vue-lazy-component': VueLazyComponent
      }
    }

    2.在组件中使用懒加载组件

    <!--
    
        需要懒加载的组件将其包裹在vue-lazy-component中
    
        slot值为 skeleton 指的是在懒加载过程中显示的加载状态组件
    -->
    
    <vue-lazy-component :timeout="5000" tagName="div">
    
          <child1 slot="skeleton" />
    
          <child2 />
    
          <child3 />
    
          <child4 />
    
          <child5 />
    
    </vue-lazy-component>

    3.参数以及事件的介绍

    转帖:https://www.cnblogs.com/zxuedong/p/12825841.html

  • 相关阅读:
    设计模式六大原则
    .net Stream篇(七)
    .net Stream篇(六)
    .net Stream篇(五)
    .net Stream篇(四)
    Leetcode 18
    Leetcode 16
    Leetcode 15
    Leetcode 12
    Leetcode 9
  • 原文地址:https://www.cnblogs.com/z-j-c/p/14061222.html
Copyright © 2011-2022 走看看