vue插槽slot与v-for的混合应用

      插槽slot想必大家都不陌生，官方文档中也做了详细的说明和案例。下面是我在项目中使用的与v-for混合应用的实例，放在这里供大家参考。

      为方便理解，我使用不同颜色的框，将应该对应的名称标记出来。相同颜色框内的名称，必须是一致的。

其中：

      绿色框的chart表示的name属性，与v-slot相对应，才会将插槽内容插入。由于案例中使用for循环，且对循环后的插槽内容没有区分，所以name都设置为“chart”。若不设置name，则默认为“default”。如果需要不同插槽插入不同内容，使用name区分开即可。官网中有案例，在此就不赘述了。

      黄色和灰色框的属性，属于插槽的prop，用于让插槽内容访问到子组件中的数据。案例中使用的是通过解构传入插槽prop的方式。