【学习打卡】第13天 封装组件中级篇

课程名称：基于Vue3+Vite+TS，二次封装element-plus业务组件
课程章节： 封装组件中级篇
主讲老师：五月的夏天

课程内容：

今天学习的内容包括：
4-14 城市选择组件-完善按省份选择城市——封装按省份排序的城市选择模块。
4-15 城市选择组件-使用 filter-method 实现搜索过滤——完善下拉框搜索，使用 filter-method 进行搜索筛选。
4-16 本章回顾——完成封装组件中级篇，主要为进度条、时间如期选择、城市选择组件。

课程收获：

完善按省份选择城市

1、按照省份选择目前数据是不满足的，因此需要整理一份符合我们交互的数据
2、根据对应数据结构进行循环把省份以及省份下城市渲染出来
3、可以复用城市选择css样式

 <template
      v-for="(item, index) in Object.values(provinces)"
      :key="index"
    >
    <template v-for="(item1, index1) in item" :key="index1">
	...
	</template>
</template>

使用 filter-method 实现搜索过滤

1、完善省份选择城市点击跳转以及点击向父组件分发

 let changeSelect = (val: number) => {
    let city = allCities.value.find((item) => item.id === val)!
    result.value = city.name
    if (radioValue.value === '按城市') {
      emits('change', city)
    } else {
      emits('change', city.name)
    }
  }

2、使用flat进行维度扁平化处理（使用Infinty报类型错误，因此使用具体number）

 Object.values(cities.value).flat(2)

3、使用includes判断是否满足，可以优化性能

[1,2,3,4].includes(1)

4、使用filter-method处理搜索筛选过滤

() => {
	return 条件
}

今天把封装组件中级篇学习完了，对组件的封装和typescript的使用都有了一定的了解，我相信现在自己可以开始写基于vue3-ts-vite的项目了。

下一步就是学习 封装组件高级篇 了。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​