Vue 组件延迟异步加载

那个，代码一看就懂，创建组件 Lazy-load.vue 文件。

<template>
  <span>
    <slot v-if="success"></slot>
  </span>
</template>

<script>
export default {
  name: 'lazy-load',
  props: {
    time: {
      required: false,
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      success: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let vm = this;
      vm.clearId = setTimeout(() => {
        vm.success = true;
        vm.$emit('done');
      }, vm.time);
    },
  },
  beforeDestroy() {
    clearTimeout(this.clearId);
  },
};
</script>

<style lang="sass" scoped>
</style>

在需要使用的地方调用，但是这里需要用到一些技巧，来实现延迟异步加载。

在项目 views/Home.vue 文件里引用延迟加载组件。

<template>
  <div class="lazy-wrap">
    <lazyLoad @done="lazyLoadDone = 'componentLazy'">
      <component :is="lazyLoadDone"></component>
    </lazyLoad>
  </div>
</template>
<script>
  import componentLazy from './components/componentLazy';

    export default {
      data() {
        return {
        };
      },
      methods: {
      },
    };

</script>

<style>
</style>

这样就可以实现按照指定的 setTimeout 时间来延迟异步加载组件了，是不是很简单。