vue开发 --- 页面延迟加载组件

问题：单页面引入的组件页面多，多数首次不显示的的dom元素，导致进入页面的时候加载慢。
参考的解决文档： https://blog.csdn.net/z470259742/article/details/79580592
解决：
1、v-if默认为false情况下不会加载组件，只有变为true的情况下才会进行加载，而且我们的组件加载后不需要销毁（我试过v-if有时候很还是会慢很多）
2、子组件可以通过插槽对父组件引用子组件包裹的内容进行分发

第二个解决方法的具体实现：
说明：子组件包含参数time，作为可设置的延迟加载时间，默认为0ms，非必填。
子组件：

<template>
  <span>
    <slot v-if="initSuccess"></slot>
  </span>
</template>
 
<script>
  export default {
    name: "pl-lazy",
    props: {
      time: {
        required: false,
        default: 0
      }
    },
    data() {
      return {
        initSuccess: false
      }
    },
    created() {
      this.initSlot();
    },
 
    methods: {
      initSlot() {
        setTimeout(()=> {
          this.initSuccess = true;
        }, (Number(this.time || 0)));
      }
    }
  }
</script>

父组件：

<pl-lazy time="200">
这里放的是延迟加载的组件/dom内容
</pl-lazy>

import PlLazy from "./plLazy";
export default {
  components: {
    PlLazy
  }, 
  name: "test-lazy"
}

如果使用的地方比较多的话，那么每个页面都这样引入有点繁琐了，咱们需要公共引入组件，这样我们就可以更方便的使用了，要达到这个效果只需要在main.js中引入组件即可:

// 注册全局组件
import plLazy from "./components/common/components/plLazy";
Vue.component('pl-lazy', plLazy);