首页 > 其他分享 >Suspense异步引入组件

Suspense异步引入组件

时间:2023-07-11 22:55:12浏览次数:28  
标签:异步 defineAsyncComponent Suspense Child 组件 import

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

  • 使用步骤:

    • 异步引入组件

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>

  

 

 

标签:异步,defineAsyncComponent,Suspense,Child,组件,import
From: https://www.cnblogs.com/ixtao/p/17546176.html

相关文章

  • BootstrapBlazor组件库,在你的Blazor应用程序中添加一个看板娘
    BootstrapBlazor组件库,在你的Blazor应用程序中添加一个看板娘效果如图这里主要用到了BootstrapBlazor组件库的Live2D插件,本插件基于pixi-live2d-display,并且支持所有版本的Live2D模型。使用时只需要在nuget安装BootstrapBlazor.Live2DDisplay组件包,在MainLaout.razor中,添......
  • elementui文本框_element UI el-autocomplete组件 带输入建议的输入框
    elementui文本框_elementUIel-autocomplete组件带输入建议的输入框原文链接:elementui文本框_elementUIel-autocomplete带输入建议的输入框项目需求:需要用户在输入框中输入公司全名  但是为了避免用户输入不全  需要做一个带输入建议的输入框element组件:class......
  • vue学习——vue实例与组件
     vc不是通用的称呼,官方的说法是组件实例对象 组件实例的原型对象的原型对象是vue的原型对象 ......
  • 18:vue3 异步加载
    在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue提供了 defineAsyncComponent 方法来实现此功能: 1<template>2<h3>异步加载</h3>3<KeepAlive>4<component:is="tabComponent"></component>5</KeepAlive>......
  • 16:vue3 动态组件
    A组件1<template>2<h3>ComponentA</h3>3</template>B组件1<template>2<h3>ComponentB</h3>3</template> App.vue1<template>2<h3>动态组件(A、B两个组件动态切换)</h3>3<compo......
  • 移动端APP组件化架构实践
    前言对于中大型移动端APP开发来讲,组件化是一种常用的项目架构方式。个人最近几年在工作项目中也一直使用组件化的方式来开发,在这过程中也积累了一些经验和思考。主要是来自在日常开发中使用组件化开发遇到的问题以及和其他开发同学的交流探讨。本文通过以下问题来介绍组件化这种......
  • 15:vue3 组件生命周期函数应用
    1<template>2<h3>组件生命周期函数应用</h3>3<!--验证Dom结构加载时机-->4<pref="name">我的内容</p>5<!--模拟网络加载数据-->6<ul>7<liv-for="(item,index)inbanner":key="item.id&q......
  • 移动端APP组件化架构实践 | 京东云技术团队
    前言对于中大型移动端APP开发来讲,组件化是一种常用的项目架构方式。个人最近几年在工作项目中也一直使用组件化的方式来开发,在这过程中也积累了一些经验和思考。主要是来自在日常开发中使用组件化开发遇到的问题以及和其他开发同学的交流探讨。本文通过以下问题来介绍组件化这种开......
  • vue3中父组件与组件之间参数传递,使用(defineProps/defineEmits),涉及属性传递,对象传递,
    Vue3中子父组件之间的通信一、父组件传递参数到子组件采用defineProps传递属性父组件:<template><div><h1>这是父组件</h1><h1>父组件像子组件传递参数</h1><h2>传递属性值</h2><HH:fatherMessage="fatherMessage":valNum="valNum":valBool=......
  • sqlserver报错 "代理XP“组件已作为此服务器安全配置的一部分被关闭。系统管理员可以
    1、https://blog.csdn.net/fallingflower/article/details/128915014想为SQLServer数据库设置自动备份,点击维护计划向导的时候报错“代理XP"组件已作为此服务器安全配置的一部分被关闭。系统管理员可以使用sp_configure来启用"代理XP”。有关启用"代理XP"的详细信息,请参阅SQL......