vue插槽slot与v-for的混合应用
绿色框的chart表示<slot>的name属性,与v-slot相对应,才会将插槽内容插入。由于案例中使用for循环,且对循环后的插槽内容没有区分,所以name都设置为“chart”。若不设置name,则默认为“default”。如果需要不同插槽插入不同内容,使用name区分开即可。
·
插槽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的方式。
更多推荐
已为社区贡献17条内容
所有评论(0)