tabs组件封装

Tabs组件封装

封装到tabs组件,最简单的方式肯定是写几个div,内容和导航栏写在一起。例如

  
1
2
3
4

但这样,逻辑代码和业务逻辑就没有彻底分开。因此,实现tab栏的最佳逻辑就是逻辑代码和业务逻辑相隔离。采用Element-plus的那种方法:


  用户管理
  配置管理
  角色管理
  定时任务补偿

下面来自己手动封装一个.

该组件封装的几个关键点:

  1. provideinject。至于为什么不用props传递,因为props会导致数据出现响应式丢失。
  2. useSlots获取到所有插槽的内容信息。

Tabs组件






pane组件






对此,基本的功能已经完成。如果有样式的需求,可以继续在上面进行封装。

你可能感兴趣的:(javascript,前端,vue.js)