Suspense

Suspense

  • 等待异步组件时渲染一些额外内容,让应用有更好的用户体验

  • 使用步骤:

    • 异步引入组件

      import {defineAsyncComponent} from 'vue'
      const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
    • 使用Suspense包裹组件,并配置好defaultfallback

      <template>
        <div class="app">
          <h3>我是App组件</h3>
          <Suspense>
            <template v-slot:default>
              <Child/>
            </template>
            <template v-slot:fallback>
              <h3>加载中.....</h3>
            </template>
          </Suspense>
        </div>
      </template>

       

posted @ 2022-05-22 14:30  杨建鑫  阅读(101)  评论(0编辑  收藏  举报