作用域插槽

假设子组件 list ：

<div>  
	<div v-for="item in list" :key="item">{{ item }}</div>
</div>

//子组件data
data() {
	return {
		list: [1, 2, 3]
	}
}

父组件中使用子组件：

<list />

展示效果为：

1
2
3

这个很好理解吧~但是如果有这么个业务需求：父组件使用子组件时不一定要使用 div ，而是有时需要使用 span 标签，即子组件中的 v-for 循环出的数要用什么 html 标签所包裹由父组件来决定，该怎么办呢？此时应使用作用域插槽，如下所示👇

子组件：

<div>
	<slot v-for="item in list" :key="item" :item="item"/> //父组件没办法调用到子组件中的item
</div>                                                    //所以这里通过:item="item"的方式传递

//子组件data
data() {
	return {
		list: [1, 2, 3]
	}
}

父组件：

<list v-slot="slotProps"> //父组件通过v-slot="slotProps"接受子组件传过来的参数，是一个对象
	<span>{{ slotProps.item }}</span>
</list>

//可以通过解构的方式简化代码
<list v-slot="{ item }">
	<span>{{ item }}</span>
</list>

展示效果：

123

总结： 当子组件渲染的内容需要父组件决定时，可以使用作用域插槽，能够让父组件调用到子组件中的数据。项目中用得不多，但是在写一些Vue的插件时会用得到，需要了解一下。