vue3 script setup写法

公司代码扫描要求一个函数不能超过50行，那么一般vue3写法setup函数肯定超了，又懒得写到hooks，同事介绍了去年vue3出的新的语法糖，研究了下，写篇博客

简单的将，去掉了exprot defult这个壳子，然后也不需要写return了，props和emit写法变成如下

const props = defineProps({data: {type: Object,default: () => ({}),},
});
const emit = defineEmits(['close']);

后面的方法直接引用即可，如props.data，emit(‘close’);

还有删掉了components，import引入的组件不需要在这里声明了，可以直接用
如果组件是异步调用进来，改成如下

const XXXDialog = defineAsyncComponent(() => import('./XXX-dialog.vue'));

注意如果之前的写法，父组件直接调用子组件的ref，用这种写法会获取不到子组件的信息，需要在子组件加如下

const info = ref([]);
defineExpose({info
})

需要通过ref读的信息丢到defineExpose里面

完整版如下

<template>//html代码
</template><script setup lang="ts">
import { ref, watchEffect, reactive, computed, defineProps, defineEmits } from 'vue';
const XXXDialog = defineAsyncComponent(() => import('./XXX-dialog.vue'));const props = defineProps({data: {type: Object,default: () => ({}),},
});
const emit = defineEmits(['close', 'submit']);
//后面是交互逻辑
const onCancel = () => {emit('close');
};
</script><style lang="scss" scoped>
//样式
</style>

总体来说写的代码变少了，所有代码都在script里面。
最后附上学习的几个链接：
https://zhuanlan.zhihu.com/p/471806345
https://blog.csdn.net/qq_41880073/article/details/124199104
https://blog.csdn.net/weixin_43931876/article/details/120058286

vue3 script setup写法相关推荐

Naive script setup写法上传注意
Naive UI上传改成script setup写法 Naive UI官网写法改成script setup写法 Naive UI官网写法 <template><n-button:d ...
Vue3 script setup 语法糖详解
前言: 目前setup sugar已经进行了定稿,vue3 + setup sugar + TS的写法看起来很香,写本文时 Vue 版本是 "^3.2.6" 1.script se ...
尤大都说Vue3 + script setup + TS + Volar真香，你说香不香？
前两天尤大官宣发布了Vue3.2,支持了好几个很不错的新特性,而且自信放话:<script setup> + TS + Volar = 真香,是时候了想看Vue3.2更新的内容文档的读者 ...
vue3 setup写法（语法糖版本）
vue3.2 版本开始才能使用语法糖! 在 Vue3.0 中变量必须 return 出来, template 中才能使用:而在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无 ...
【Vue3】vue3中组合式Api的setup写法快速入门上手起步
要使用Vue3,那必须得会setup,因为setup是组合式API表演的舞台. 安装volar 如果你的VScode之前安装有vuter插件,请先把他禁用或者卸载掉,然后安装volar. 因为,vut ...
vue3.0的写法以及setup的用法
vue3.0的写法一.setup的特性二.vue2.0与vue3.0用法的区别三.setup用法一.setup的特性 1.setup函数是处于生命周期函数beforeCreate 和 Crea ...
vue3+setup写法
setup函数是 Composition API(组合API)的入口在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用 <script>expor ...
vue3之语法糖script setup的父子组件、兄弟组件传值
背景:随着vue的使用范围越来越广,使用人数越来越多,其的发展更新速度也是再上一个台阶,vue2故好,但组件化过程中的某些组件化操作稍微有一些弊端,从而vue3随之诞生,vue3兼容typescrip ...
Vue3组合式Api script setup模式中顶层使用await报Top-level ‘await‘ expressions are only allowed when the ‘module‘
今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误(能正常编译),错误提示是: Top-level 'awa ...

vue3 script setup写法

vue3 script setup写法相关推荐

最新文章

热门文章