首页 > 其他分享 >vue2组件懒加载(Vue Lazy Component )

vue2组件懒加载(Vue Lazy Component )

时间:2023-02-15 18:57:03浏览次数:54  
标签:Lazy Vue Component VueLazyComponent component lazy vue 组件 加载

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.参数以及事件的介绍

 

 

 

标签:Lazy,Vue,Component,VueLazyComponent,component,lazy,vue,组件,加载
From: https://www.cnblogs.com/luoguixin/p/17124300.html

相关文章

  • vue 数组对象深拷贝 并根据某项属性排序
    vue数组对象深拷贝并根据某项属性  serialNumber  排序原始数据navListData:[{name:'企业速览',isHot:false,is......
  • vue中element-ui配置一二级导航动态渲染并跳转
    这次的导航效果,包括二级导航,请认真食用~先看下效果图吧具体的步骤如下1.安装element-uinpminstallelement-ui--save或cnpminstallelement-ui--save2.需要准......
  • vue-day03——js中的循环、key值在循环的作用、数组,对象的检测与更新、input时间、v-m
    目录一、js的几种循环方式1.1v-for可以循环的变量1.2js的循环方式二、key值的解释三、数组,对象的检测与更新四、input事件五、v-model双向数据绑定六、过滤案例七、事件......
  • vue实现图片蒙层效果(带收藏、分享功能)
    实现如下效果:当鼠标经过会出现蒙层并且有对应需求思路:蒙层采用定位鼠标经过给蒙层元素display设置为'block'鼠标移开display设置为'none',具体看代码这是渲染的图片......
  • vue3之异步组件defineAsyncComponent 使用无效?
    原文地址:我的稀土掘金介绍:defineAsyncComponent用于拆分应用为更小的块,并仅在需要时再从服务器加载相关组件官网案例<scriptsetup>import{defineAsyncComponent......
  • vue---day03
    昨日回顾#1mvvm演示#2插值语法{{}} -三目运算符条件?'':''#3文本指令 -v-xxvue的指令,放在标签上<pv-xx></p>-v-text='变......
  • Vue 急速入门2
    内容概要Js的几种循环方式v-for可以循环的变量<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="vue/......
  • vue中渲染数据时的计算
    如果后端返回的数据需要简单的处理,比如需要截取、字段间的简单计算之类的操作可以直接在渲染中使用字段间的计算:{{Number(`${product.PlanNum}`)+Number(`${product.Sum......
  • Vue 自定义指令-directive
    什么是自定义指令vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外vue还允许开发者自定义指令。局部自定义指令的使用<body><divid="app">......
  • Vue 自定义指令-directives
    什么是自定义指令vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外vue还允许开发者自定义指令。局部自定义指令的使用<body><divid="app">......