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

课程名称：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的应用等等，这对于实际项目的使用非常有用，而且老师讲的很简单易懂，基本都可以跟着老师节奏走，讲的很好很实用。