Vue3通透教程【十八】TS为组件的props标注类型

文章目录

  • 写在前面
  • 回顾defineProps的基础写法
  • defineProps的TS写法
  • withDefaults方法
  • 拓展
  • 写在最后


写在前面

专栏介绍:
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其他框架的巨大优势,有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的,随着 Vue 框架不断的被认可,现如今的 Vue 框架已经是前端工程师必备的技能了,记得尤大大开发 Vue 的初衷,为了让自己的开发工作更加便捷,也希望这个框架能让更多人的开发工作变得轻松;现如今 Vue 框架做到了,尤大大做到了,当然在 20 年的 9 月 18 日,Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布!如今已经过去了两年多的时间,更多的公司选择了Vue3技术,所以凉哥也在这个时候为大家出这份专栏,本专栏将帮助大家掌握Vue3+TS技术,提升自己竞争力!

温故知新:
上篇文章带领大家一起搭建了我们的第一个Vue3+TS的项目,本篇的内容我们就来用TS来编写我们前面Vue3+JS的功能代码;让大家初步了解感受TS的结合运用!让我们 let’s coding!

我们也遵循官方推荐的渐进规则,我们首先来改造的的就是我们Vue3的父子组件通讯写法,如果你还不了解Vue3中的父子组件通讯,可以先看下咱们Vue3通透教程【九】父子组件通讯一目了然 这篇文章;后面的编码中我们就用上篇文章中创建的demo项目即可!


回顾defineProps的基础写法

不知道大家一眼看到defineProps还是否能够get到这是做什么的?其实就是前面为大家讲解的父组件向自组件传递数据,我们首先就来以这个方法为例子来将它用TS的写法呈现出来;这里呢我们还是初始化一个案例!子组件中我们接受两个参数一个是姓名,一个年龄,然后父组件传递这两个参数;

Vue3通透教程【十八】TS为组件的props标注类型_第1张图片

在项目中src/components目录下我们创建一个son.vue作为子组件,接受姓名、年龄作为参数;

<template>
    <div>姓名:{{ sonName }}div>
    <div>年龄:{{ sonAge }}div>
template>
<script setup>
defineProps({
    sonName: {
        type: String,
        default: '',
        required:true,
    },
    sonAge: {
        type: Number,
        default: ''
        required:true,
    }
})
script>

删除app.vue中的代码,我们将此作为父组件!引入代码子组件并通过自定义属性进行传参。

<template>
  <p>儿子信息:p>
  <son sonName="哈哈" :sonAge="18">son>
template>
<script setup>
import son from "./components/son.vue";
script>

Vue3通透教程【十八】TS为组件的props标注类型_第2张图片

打开页面我们能够看到可以正常显示,但是细心的伙伴会发现一个问题,为什么在demo这个项目我们的

你可能感兴趣的:(前端基础三件套,vue.js,前端,javascript,前端框架)