首页 > 其他分享 >vue3的<setup script>中使用異步函數

vue3的<setup script>中使用異步函數

时间:2022-11-17 09:57:42浏览次数:54  
标签:setup 異步 函數 vue3 組件 async

由於vue3的setup一般情況下不允許為async,如果要將setup變成async,則要引入異步組件

	<Suspense>
		<template #default>
			<SwitchMaintenanceUpdate/>
		</template>
	</Suspense>

引入組件的代碼這樣寫

let SwitchMaintenanceUpdate = defineAsyncComponent(()=>import("@/components/pc/SwitchMaintenanceUpdate"))

這樣,子組件的setup函數就可以加上async了

儅子組件使用<script setup>時如果標簽内含有async函數時也一樣處理(PS:生命周期内的async不算)

對vue3的新特性掌握還是不夠啊

标签:setup,異步,函數,vue3,組件,async
From: https://www.cnblogs.com/BigFace123/p/16898406.html

相关文章

  • Vue和Vue3在VS中的插件
     Vue的插件vetur vetur和Vue3插件VuelanguageFeature冲突,只能用一个   Vue3的插件volarVuelanguageFeature和Vue插件Vetur冲突,只能用一个 ......
  • Vue3(Mitt)
     Vue3+vite+Ts+pinia+实战+源码+全栈_哔哩哔哩_bilibili视频教程在vue3中$on,$off和$once实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的E......
  • 手动实现 vue3 [ reactive, computed, watch ]
    一、vue.js1importreactivefrom"./reactive";2importWatcherfrom"./Watcher";3importcomputedfrom"./computed";4importwatchfrom"./watch";56ex......
  • VUE3 elment-ui el-tabel遍历实现表格的自定义列【KEY值为列名】
    <template><div><el-table:data="resultTable"borderref="multipleTable"tooltip-effect="light"size="mini"><el-table-columntype="i......
  • Vue3的setup在el-tab中动态加载组件
    公司某项目需求在页面显示的组件是根据角色变化而变化的,在这个项目中我使用了elementplus的el-tabs来动态的显示这些组件,如下图所示数据内容大概是这样的在未使用setup......
  • vue3+Ts+Vite+ElementPlus+Axios+Router+Pinia 创建过程以及会出的错误
    第一步保证Node.Js版本为12.0以上打开cmd命令输入node-v看版本目前是最新用18.0就行,下载地址:[https://nodejs.org/en/](https://nodejs.org/en/)安装node.js配环境......
  • Vue2 到 Vue3,重温这 5 个常用的 API
    距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等。虽然目前大多数开发者们在使用的仍旧以Vue2为准,但Vue3显然是Vue开发者们未来必须面对的,......
  • Vue3在Vite中配置scss并使用
     提出问题单个文件引入时,需要在每个 stylelang="scss"scoped标签下这样引入,每次都要手动引入非常麻烦,因此就想做全局配置@import"@/assets/scss/global.scss"......
  • Vue3解决前端跨域问题
    在vue.config.js里添加代理备注:例如vue想请求不在同一台服务器上的localhost:8080服务器的接口,在下面proxy里的target里写上要访问的服务器的前缀,然后写一个别名'/project......
  • Vue3 —— 组件练习题(附源码)
    一、定义一个vue分页组件,实现客户端分页功能1.1、子组件A(页数按钮)<!--本组件用于遍历分页的页数按钮--><templatelang=""><divclass="btn-box"><!--......