为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第11天 组件拆分以及父子组件如何传参

【九月打卡】第11天 组件拆分以及父子组件如何传参

2022.09.19 21:06 15浏览

课程名称:Vue3 + Typescript 从0到1开发通用基础组件

课程章节:项目起航 - 准备工作和第一个页面(6~11节)

课程讲师:张轩

课程内容:

这节课老师主要是通过columnlist和dropdown两个例子给我们讲述了vue3和typescript结合编写组件,组件传参以及类型断言等,另外还结合bootstrap的运用,减少样式编写也能写出好看的前端页面,从另一个角度解析了是如何提升开发效率的。

课程收获:

  • props

    组件的props,这个是vue编写组件比较常用的一个功能,它是接收父组件传参的一种方式。通过本节课可以看到vue3使用typescript的时候会有一些不同,我们可以定义接收属性的类型和是否必需等,其中类型我们可能会需要要类型断言,但是某些情况下是不能直接使用断言的,比如array类型本身是一个数组的构造函数,如果直接使用接口作为类型断言是会报错的不允许的,这时候就要使用到vue3提供的一个导入属性PropType,将类型断言成一个泛型就可以了。所以将一个类型断言成一个泛型需要我们添加PropType。这样做的好处是咱们可以在编写js和模板的时候都可以得到提示自动补全。

    import {defineComponent, PropType } from 'vue';
    export interfece ColumnProps:{
        id: number,
        title:string,
        description: string
    }
    export default defineComponent ({
        poros:{
    	    list: {
    		    type: Array as PropType<ColumnProps[]>,
    		    required:true
    	    }
        }
    })
    
  • bootstrap

bootstrap是一个样式组件库,里面封装好很多多样化,满足各种需求的组件提供给开发者使用。我们通过引入组件库和样式,就可以轻松的使用组件,只需要添加响应的类名就可以写出带有样式风格的好看的页面,这不仅减少了很多样式代码的编写,同时也使开发者更专注于逻辑编写,提高了开发效率,是一个相当不错的组件库。

这节课不仅收获了如何使用proptype断言,vetur支持typescript属性提示,computed重组数据,以及bootstrap的使用提升开发效率,同时通过老师dropdown例子可以看到ts接口泛型的使用,组件的拆分,数据传递,以及slot的应用等等,这对于实际项目的使用非常有用,而且老师讲的很简单易懂,基本都可以跟着老师节奏走,讲的很好很实用。

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
0
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消