vue3:setup语法糖使用教程
更新时间:2022年8月25日 22:14 点击:751 作者:嫑哭嘦笑
1.setup语法糖简介
直接在script标签中添加setup属性就可以直接使用setup语法糖了。
使用setup语法糖后,不用写setup函数;组件只需要引入不需要注册;属性和方法也不需要再返回,可以直接在template模板中使用。
<template> <my-component @click="func" :numb="numb"></my-component> </template> <script lang="ts" setup> import {ref} from 'vue'; import myComponent from '@/component/myComponent.vue'; //此时注册的变量或方法可以直接在template中使用而不需要导出 const numb = ref(0); let func = ()=>{ numb.value++; } </script>
2.setup语法糖中新增的api
- defineProps:子组件接收父组件中传来的props
- defineEmits:子组件调用父组件中的方法
- defineExpose:子组件暴露属性,可以在父组件中拿到
2.1defineProps
父组件代码
<template> <my-component @click="func" :numb="numb"></my-component> </template> <script lang="ts" setup> import {ref} from 'vue'; import myComponent from '@/components/myComponent.vue'; const numb = ref(0); let func = ()=>{ numb.value++; } </script>
子组件代码
<template> <div>{{numb}}</div> </template> <script lang="ts" setup> import {defineProps} from 'vue'; defineProps({ numb:{ type:Number, default:NaN } }) </script>
2.2defineEmits
子组件代码
<template> <div>{{numb}}</div> <button @click="onClickButton">数值加1</button> </template> <script lang="ts" setup> import {defineProps,defineEmits} from 'vue'; defineProps({ numb:{ type:Number, default:NaN } }) const emit = defineEmits(['addNumb']); const onClickButton = ()=>{ //emit(父组件中的自定义方法,参数一,参数二,...) emit("addNumb"); } </script>
父组件代码
<template> <my-component @addNumb="func" :numb="numb"></my-component> </template> <script lang="ts" setup> import {ref} from 'vue'; import myComponent from '@/components/myComponent.vue'; const numb = ref(0); let func = ()=>{ numb.value++; } </script>
2.3defineExpose
子组件代码
<template> <div>子组件中的值{{numb}}</div> <button @click="onClickButton">数值加1</button> </template> <script lang="ts" setup> import {ref,defineExpose} from 'vue'; let numb = ref(0); function onClickButton(){ numb.value++; } //暴露出子组件中的属性 defineExpose({ numb }) </script>
父组件代码
<template> <my-comp ref="myComponent"></my-comp> <button @click="onClickButton">获取子组件中暴露的值</button> </template> <script lang="ts" setup> import {ref} from 'vue'; import myComp from '@/components/myComponent.vue'; //注册ref,获取组件 const myComponent = ref(); function onClickButton(){ //在组件的value属性中获取暴露的值 console.log(myComponent.value.numb) //0 } //注意:在生命周期中使用或事件中使用都可以获取到值, //但在setup中立即使用为undefined console.log(myComponent.value.numb) //undefined const init = ()=>{ console.log(myComponent.value.numb) //undefined } init() onMounted(()=>{ console.log(myComponent.value.numb) //0 }) </script>
补充:与普通的script一起使用
<script setup>可以和普通的<script>一起使用。普通的<script>在有这些需要的情况下或许会被使用到。
- 无法在<script setup>声明的选项,例如inheritAttrs或通过插件启用的自定义的选
- 声明命名导出
- 运行副作用或者创建只需要执行一次的对象
<script> // 普通 <script>, 在模块范围下执行(只执行一次) runSideEffectOnce() // 声明额外的选项 export default { inheritAttrs: false, customOptions: {} } </script> <script setup> // 在 setup() 作用域中执行 (对每个实例皆如此) </script>
总结
到此这篇关于vue3:setup语法糖使用的文章就介绍到这了,更多相关vue3:setup语法糖内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/weixin_44439874/article/details/122126
下一篇: react实现消息显示器
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了c# 切片语法糖的相关资料,帮助大家更好的理解和学习c#,感兴趣的朋友可以了解下...2020-12-08
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 这篇文章主要介绍了Pytest实现setup和teardown的详细使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下...2023-01-17
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07
- 这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25
- 本文主要介绍了手摸手教你实现Vue3 Reactivity,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-25
- 当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下...2021-10-17