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

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

<!-- <charts-wrap>组件模板 -->
<div>
    <slot v-for="(item,index) in list" 
            name="chart"
            :data="item"
            :index="index">
    </slot>
</div>

<!-- 插槽模板 -->
<charts-wrap v-slot:chart="{index,data}">
    <chart :ref="'chart'+index" :chartData="data"></chart>
</charts-wrap>

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

其中：

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

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