vue 3.0 suspense组件
2023-09-14 09:06:32 时间
1.定义组件
<template> <h1>{{result}}</h1> </template> <script> export default { name: "NewModel", setup(){ return new Promise((resolve)=>{ setTimeout(()=>{ return resolve({result:"OK"}) },3000) }) } } </script>
2.使用suspense渲染效果
<suspense> <template #default> <new-model></new-model> </template> <template #fallback> <h1>Loadding...</h1> </template> </suspense>
结果三秒之前显示Loadding... ,三秒之后显示组件内容;(成功后显示组件内容)
3.定义异步组件
4.使用suspense渲染
<suspense> <template #default> <new-model></new-model> </template> <template #fallback> <h1>Loadding...</h1> </template> </suspense>
相关文章
- Vue_(组件通讯)单项数据流
- Vue_(组件通讯)父组件向子组件传值
- vue - 子组件向父组件 传递方法和参数
- vue父组件调用子组件资源
- Vue自定义组件插入值
- 前后端项目部署-6, flask+Gunicorn+gevent+supervisor+nginx+redis+mysql+mongodb+vue,docker-compose部署
- vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
- php/nginx/axios: 文件上传: 配置最长执行时间等相关项 (php8.1.1 / nginx 1.18.0 / vue@3.2.26 )
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- vue框架-基础2-vue生命周期
- vue.js3.2.20: 在打包时取消生成.map文件
- vue-cli工程目录结构及相关文件说明
- Vue+Spring boot前后端响应流程总结
- 最详细的Vue Hello World应用开发步骤
- Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)
- vue select下拉框绑定默认值
- Vue组件库新增的prop属性类型是Object或者Array时默认值的设置
- 233:vue+openlayers绘制渐变填充色的圆形、多边形
- Vue(九)http-proxy 跨域、插槽 slot
- Vue组件间通信方式都有哪些?
- 基于Java+SpringBoot+Vue前后端分离学生管理系统设计与实现
- 【三十天精通Vue 3】 第十五天 Vue 3的异步组件和代码拆分
- 【三十天精通Vue 3】第八天 Vue 3 生命周期钩子详解
- Vue学习笔记——Vue UI组件库