首先, 我先来看看效果

steps 组件的封装和 tabs 组件还是相似的

都会去指定两个组件来完成(仿Element UI), 都会去使用 jsx 的语法

让其中一个组件去规定样式和排版, 另外一个组件去接收父组件传入的动态数据

但和面包屑组件还是有区别的(面包屑组件封装):

相同点都是使用两个组件来完成(一个指定排版, 另外一个指定内容), 都是使用 render 函数来进行渲染

不同点是, bread 组件使用的是 h 函数来创建虚拟节点; 然后使用 render 来进行渲染

而 tabs 和 steps 使用的是 jsx 语法来指定标签(使用 jsx 的原因是, 需要指定两个以上的标签且有嵌套关系, 如果使用 h 函数的话太麻烦了)

第一步: 

1. 创建 steps 和 steps-item 组件

2. steps-item 组件接收 title 和 desc 数据

steps-item 主要是去接收外部传入的 title 和 desc 的动态数据, 然后将这些数据直接给到 steps 来进行出来

所以不需要使用  

第二步:

1. 显示 steps 组件数据

也就是在 steps 组件中接收到一个 active 的数据(父组件发送请求获取过来的节点数据)

首先需要拿到所有的 steps-item 组件数据(通过 $slots.default)

然后, 判断 $slots.default 返回的数据中对象中的 type 数据是否为代码片段(这里的详细讲解在 tabs 组件封装时讲过了(tabs 组件封装)

然后指定显示内容

第三步:

1. 在 steps 组件中接收 active 数据, 然后根据 active 数据动态显示 steps 的节点

父组件中使用情况

根据后端的数据来决定 steps 的节点数据