这篇“Vue3如何使用setup语法糖拒绝写return”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue3如何使用setup语法糖拒绝写return”文章吧。
网站的建设创新互联 专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都iso认证 等企业提供专业服务。
Vue3.2 setup语法糖 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖
解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在使用的问题
1.
//在template中直接使用声明的变量、函数以及import引入的内容
{{ msg }}
{{getToday()}}
标准组件 需要写setup函数并繁琐retrun
{{ msg }}
{{getToday()}}
小结:语法糖里面的代码会被编译成组件 setup() 函数的内容,不需要通过return暴露 声明的变量、函数以及import引入的内容,即可在使用,并且不需要写export default{}
语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 只在组件被首次引入的时候执行一次不同, 中的代码会在每次组件实例被创建的时候执行
(script-setup标签最终都会编译成setup() 函数的内容,每次实例化组件,就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件,就是实例化一次setup函数,但是script标签setup是需要写在export default{}内的,外的只是首次引入的时候执行一次)
2、 子组件:
中可以直接使用父组件传递的props (可省略props.)
需要通过props.xx获取父组件传递过来的props
子组件
父组件传递的值:{{title}}
defineEmit 代替emit 子组件向父组件传递数据(子组件向外暴露数据)
子组件代码:
子组件
子组件向外暴露数据
父组件代码:
父组件
接收子组件传递的数据{{childData}}
4. 父组件代码:
父组件
通过ref获取子组件的属性
5.语法糖其他功能 useSlots 和 useAttrs (少用 ,由于大部分人是SFC模式开发,在通过标签就可以渲染插槽)
如果需要在script-setup中使用 slots 和 attrs 需要用useSlots 和 useAttrs替代
需要引入:import { useSlots ,useAttrs } form 'vue'
在中通过 $slots 和 $attrs 来访问更方便(attrs用来获取父组件中非props的传递到子组件的参数/方法,attrs 用来获取父组件中非props的传递到子组件的参数/方法,attrs用来获取父组件中非props的传递到子组件的参数/方法,slots可以获取父组件中插槽传递的虚拟dom对象,在SFC模式应该用处不大,在JSX /TSX使用比较多)
父组件:
默认插槽
具名插槽
作用域插槽——姓名:{{ scope.name }},年龄{{ scope.age }}
子组件:
{{ attrs.msg == $attrs.msg }}
{{ slots == $slots }}
useSlots或许在JSX/TSX下更实用
想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx
useSlots 可以获取父组件传递过来插槽的虚拟dom对象,可以用来渲染插槽内容
大部分人是SFC模式开发,在通过标签就可以渲染插槽,这种JSX 的写法应该是很少人会使用的
6.在setup访问路由 setup 里不能访问 this,不能再直接访问 this.$router 或 this.$route。(getCurrentInstance可以替代this但不推荐)
推荐:使用useRoute 函数和useRouter函数替代this.$route 和 this.$router
基本
文件
流程
错误
SQL
调试
请求信息 : 2026-05-26 12:26:20 HTTP/1.1 GET : /article/jgghdc.html 运行时间 : 1.0290s ( Load:0.0063s Init:0.0012s Exec:1.0124s Template:0.0091s ) 吞吐率 : 0.97req/s 内存开销 : 2,262.90 kb 查询信息 : 12 queries 5 writes 文件加载 : 36 缓存信息 : 0 gets 0 writes 配置加载 : 130 会话信息 : SESSION_ID=q8jb7t7gqd12u7p15ripo3h383
/www/wwwroot/tsicrk.com/index.php ( 1.09 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/ThinkPHP.php ( 4.61 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Think.class.php ( 12.26 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Storage.class.php ( 1.37 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Storage/Driver/File.class.php ( 3.52 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Mode/common.php ( 2.82 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Common/functions.php ( 53.56 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Hook.class.php ( 4.01 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/App.class.php ( 13.49 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Dispatcher.class.php ( 14.79 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Route.class.php ( 13.36 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Controller.class.php ( 11.23 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/View.class.php ( 7.59 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/BuildLiteBehavior.class.php ( 3.68 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ParseTemplateBehavior.class.php ( 3.88 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ContentReplaceBehavior.class.php ( 1.91 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Conf/convention.php ( 11.15 KB ) /www/wwwroot/tsicrk.com/App/Common/Conf/config.php ( 2.14 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Lang/zh-cn.php ( 2.55 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Conf/debug.php ( 1.49 KB ) /www/wwwroot/tsicrk.com/App/Home/Conf/config.php ( 0.31 KB ) /www/wwwroot/tsicrk.com/App/Home/Common/function.php ( 3.33 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ReadHtmlCacheBehavior.class.php ( 5.62 KB ) /www/wwwroot/tsicrk.com/App/Home/Controller/ArticleController.class.php ( 6.02 KB ) /www/wwwroot/tsicrk.com/App/Home/Controller/CommController.class.php ( 1.60 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Model.class.php ( 60.11 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php ( 32.43 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db/Driver/Pdo.class.php ( 16.74 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Cache.class.php ( 3.83 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Cache/Driver/File.class.php ( 5.87 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template.class.php ( 28.16 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template/TagLib/Cx.class.php ( 22.40 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template/TagLib.class.php ( 9.16 KB ) /www/wwwroot/tsicrk.com/App/Runtime/Cache/Home/7540f392f42b28b481b30614275e4e55.php ( 17.71 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/WriteHtmlCacheBehavior.class.php ( 0.97 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ShowPageTraceBehavior.class.php ( 5.24 KB )
[ app_init ] --START-- Run Behavior\BuildLiteBehavior [ RunTime:0.000005s ] [ app_init ] --END-- [ RunTime:0.000029s ] [ app_begin ] --START-- Run Behavior\ReadHtmlCacheBehavior [ RunTime:0.000305s ] [ app_begin ] --END-- [ RunTime:0.000330s ] [ view_parse ] --START-- [ template_filter ] --START-- Run Behavior\ContentReplaceBehavior [ RunTime:0.000053s ] [ template_filter ] --END-- [ RunTime:0.000086s ] Run Behavior\ParseTemplateBehavior [ RunTime:0.006192s ] [ view_parse ] --END-- [ RunTime:0.006219s ] [ view_filter ] --START-- Run Behavior\WriteHtmlCacheBehavior [ RunTime:0.000179s ] [ view_filter ] --END-- [ RunTime:0.000195s ] [ app_end ] --START--
1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1
[ SQL语句 ] : SELECT `id`,`pid`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1
[ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 1
[ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( pid= ) [8] Undefined index: pid /www/wwwroot/tsicrk.com/App/Home/Controller/ArticleController.class.php 第 47 行. [8] Undefined index: db_host /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 120 行. [8] Undefined index: db_port /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 121 行. [8] Undefined index: db_name /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 122 行.
1.0290s