郑州网站建设选微锐x,云南文山邮编,dede怎么做视频网站,wordpress 留言文章目录 #x1f31f; 写在前面#x1f31f; 回顾defineProps的基础写法#x1f31f; defineProps的TS写法#x1f31f; withDefaults方法#x1f31f; 拓展#x1f31f; 写在最后 #x1f31f; 写在前面
专栏介绍#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 … 文章目录 写在前面 回顾defineProps的基础写法 defineProps的TS写法 withDefaults方法 拓展 写在最后 写在前面
专栏介绍 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章应粉丝要求开始更新 Vue3 的相关技术文章Vue 框架目前的地位大家应该都晓得所谓三大框架使用人数最多公司选型最多的框架凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因和 Vue 框架相比其他框架的巨大优势有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的随着 Vue 框架不断的被认可现如今的 Vue 框架已经是前端工程师必备的技能了记得尤大大开发 Vue 的初衷为了让自己的开发工作更加便捷也希望这个框架能让更多人的开发工作变得轻松现如今 Vue 框架做到了尤大大做到了当然在 20 年的 9 月 18 日Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布如今已经过去了两年多的时间更多的公司选择了Vue3技术所以凉哥也在这个时候为大家出这份专栏本专栏将帮助大家掌握Vue3TS技术提升自己竞争力
温故知新 上篇文章带领大家一起搭建了我们的第一个Vue3TS的项目本篇的内容我们就来用TS来编写我们前面Vue3JS的功能代码让大家初步了解感受TS的结合运用让我们 let’s coding
我们也遵循官方推荐的渐进规则我们首先来改造的的就是我们Vue3的父子组件通讯写法如果你还不了解Vue3中的父子组件通讯可以先看下咱们Vue3通透教程【九】父子组件通讯一目了然 这篇文章后面的编码中我们就用上篇文章中创建的demo项目即可 回顾defineProps的基础写法
不知道大家一眼看到defineProps还是否能够get到这是做什么的其实就是前面为大家讲解的父组件向自组件传递数据我们首先就来以这个方法为例子来将它用TS的写法呈现出来这里呢我们还是初始化一个案例子组件中我们接受两个参数一个是姓名一个年龄然后父组件传递这两个参数 在项目中src/components目录下我们创建一个son.vue作为子组件接受姓名、年龄作为参数
templatediv姓名{{ sonName }}/divdiv年龄{{ sonAge }}/div
/template
script setup
defineProps({sonName: {type: String,default: ,required:true,},sonAge: {type: Number,default: required:true,}
})
/script删除app.vue中的代码我们将此作为父组件引入代码子组件并通过自定义属性进行传参。
templatep儿子信息/pson sonName哈哈 :sonAge18/son
/template
script setup
import son from ./components/son.vue;
/script打开页面我们能够看到可以正常显示但是细心的伙伴会发现一个问题为什么在demo这个项目我们的script setup这句代码会有波浪线的提示 其实这里的提示呢很好理解就是我们创建的这个项目呢是Vue3TS的项目但是我们这里的代码就是缺少了langts所以代码检测会给我们波浪线的提示当然他不会报错也不影响执行我们添加上就好了就是把script setup换成script setup langts但是我们这样替换后下面的代码也会又了波浪线提示这个就是我们TS语法上提示了我们也就开始要把我们刚才的写法替换成TS写法 defineProps的TS写法
我们还是来到son.vue文件中然后我们为defineProps方法上加上泛型为两个字段添加上类型
templatediv姓名{{ sonName }}/divdiv年龄{{ sonAge }}/div
/template
script setup langts
// defineProps({
// sonName: {
// type: String,
// default: ,
// required: true,
// },
// sonAge: {
// type: Number,
// default: ,
// required: true,
// }
// })
defineProps{sonName: stringsonAge: number
}()
/script是不是很简单哈哈这里也给大家扩展一下就是我们现在呢两个参数都是必填而且都没有配置默认值如果说我们把年龄配置为非必填默认值为1这个的话我们用原来的基础写法就很简单如下配置即可我们把app.vue中对自组件传递的sonAge参数删除就会使用我们默认的1
defineProps({sonName: {type: String,default: ,required: true,},sonAge: {type: Number,default: 1,required: false,}
})那我们在Vue3TS中如何去实现非必填且有默认值呢下面我们先来看下非必填这个很简单就是添加一个?即可
defineProps{sonName: stringsonAge?: number
}()withDefaults方法
刚才我们在上面实现了TS写法的非必填那么默认值该如何配置呢其实就用到Vue中提供的这个方法withDefaults这个方法接收两个参数一个就是我们上面的defineProps整个方法第二个参数就是我们需要配置的默认值我们来编写一个代码
withDefaults(defineProps{sonName: stringsonAge?: number}(), {sonAge: 2
}
)这将被编译为等效的运行时 props default 选项。此外withDefaults 帮助程序为默认值提供类型检查并确保返回的 props 类型删除了已声明默认值的属性的可选标志。 拓展
上面我们在为props标注类型的时候还算清晰但是到了使用withDefaults方法嵌套的时候会感觉有点乱所以我们可以将类型的生命力提到一个接口中
interface Props {sonName: stringsonAge?: number
}withDefaults(definePropsProps(), {sonAge: 3
}
)这样是不是就会清晰很多呢 写在最后
大家看完这篇文章相信大家对我们Vue3与TS的结合有了初步的了解可能我们用惯了js初步使用TS会有一些别扭确实是这样的我在最初使用的时候亦是如此但是我们还是要慢慢的去掌握他熟练他毕竟趋势很明显众多框架向他拥护我们一起加油下篇文章中我们会为大家呈现更多组合API的TS写法各位小伙伴让我们 let’s coding ✨ 原创不易还希望各位大佬支持一下 \textcolor{blue}{原创不易还希望各位大佬支持一下} 原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 \textcolor{green}{点赞你的认可是我创作的动力} 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 \textcolor{green}{收藏你的青睐是我努力的方向} 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富 \textcolor{green}{评论你的意见是我进步的财富} 评论你的意见是我进步的财富
