嘿，各位观众老爷们，今天咱们聊聊Vue里一个挺重要，也容易让人犯迷糊的东西：作用域插槽。特别是在Vue 2和Vue 3之间，它的写法和用法有点小变化，一不小心就容易踩坑。所以，今天咱们就来好好梳理一下，保证你听完之后，再也不怕作用域插槽了！
开场白：插槽是个啥？为啥需要作用域插槽？
话说，在Vue的世界里，组件就像一个个乐高积木，可以随意组合。但是，有些时候，父组件想更精细地控制子组件的某一部分的渲染，比如说，子组件有个列表，父组件想自定义列表项的样式。这时候，插槽就派上用场了。
插槽允许父组件往子组件里“塞”一些内容，这些内容由父组件来定义。但是，如果父组件想用子组件里的数据来渲染这些内容，那就需要作用域插槽了。简单来说，作用域插槽就是子组件把自己的数据“打包”好，通过插槽传递给父组件，让父组件可以利用这些数据来渲染插槽内容。
第一幕：Vue 2 的 slot-scope——老兵不死，只是逐渐凋零
在Vue 2时代，作用域插槽是通过 slot-scope 属性来实现的。 它的使用方法是这样的：
-
子组件定义插槽，并传递数据：
// ChildComponent.vue <template> <div> <slot name="item" :item="itemData"> <!-- 如果父组件没有提供内容，就显示默认内容 --> {{ itemData.name }} - {{ itemData.price }} (默认) </slot> </div> </template> <script> export default { data() { return { itemData: { name: 'Vue 2 经典书', price: 99, }, }; }, }; </script>这里，我们定义了一个名为
item的插槽，并且通过:item="itemData"将itemData对象传递给父组件。 -
父组件使用插槽，并接收数据：
// ParentComponent.vue <template> <div> <ChildComponent> <template slot="item" slot-scope="slotProps"> <!-- slotProps 包含了子组件传递的数据 --> <div> 商品：{{ slotProps.item.name }}，价格：￥{{ slotProps.item.price }} (父组件自定义) </div> </template> </ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, }; </script>这里，我们使用了
<template slot="item" slot-scope="slotProps">来接收子组件传递的数据。slot="item"指定了要使用哪个插槽，slot-scope="slotProps"将子组件传递的数据赋值给slotProps对象，然后我们就可以通过slotProps.item.name和slotProps.item.price来访问这些数据了。
重点： slot-scope 是定义在 <template> 标签上的，用来声明接收作用域数据的变量。 slot 属性用来指定插槽的名称。
第二幕：Vue 3 的 v-slot——取而代之，更加强大
在Vue 3中，slot-scope 被废弃了，取而代之的是 v-slot 指令。 v-slot 的语法更加简洁、直观，也更符合Vue 3的设计理念。
-
子组件定义插槽，并传递数据（和Vue 2一样）：
// ChildComponent.vue (Vue 3) <template> <div> <slot name="item" :item="itemData"> <!-- 如果父组件没有提供内容，就显示默认内容 --> {{ itemData.name }} - {{ itemData.price }} (默认) </slot> </div> </template> <script> export default { data() { return { itemData: { name: 'Vue 3 教程', price: 120, }, }; }, }; </script>子组件的代码基本没变，还是通过
<slot>标签定义插槽，并传递数据。 -
父组件使用插槽，并接收数据：
// ParentComponent.vue (Vue 3) <template> <div> <ChildComponent> <template v-slot:item="slotProps"> <!-- slotProps 包含了子组件传递的数据 --> <div> 商品：{{ slotProps.item.name }}，价格：￥{{ slotProps.item.price }} (父组件自定义) </div> </template> </ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, }; </script>这里，我们使用了
<template v-slot:item="slotProps">来接收子组件传递的数据。v-slot:item指定了要使用哪个插槽，="slotProps"将子组件传递的数据赋值给slotProps对象。
重点：
v-slot必须定义在<template>标签上（只有一个例外，后面会讲）。v-slot:插槽名="接收数据的变量名"的语法更加清晰，也更易于理解。- 如果父组件没有使用插槽，子组件的默认内容会被渲染。
第三幕：v-slot 的简写形式——偷懒是程序员的美德
在Vue 3中，如果插槽是默认插槽（也就是没有 name 属性的插槽），那么 v-slot 可以简写为 #。 例如：
-
子组件定义默认插槽：
// ChildComponent.vue (Vue 3) <template> <div> <slot :data="itemData"> <!-- 默认插槽的默认内容 --> {{ itemData.name }} - {{ itemData.price }} (默认) </slot> </div> </template> <script> export default { data() { return { itemData: { name: 'Vue 3 进阶', price: 150, }, }; }, }; </script>注意，这里没有指定
name属性。 -
父组件使用默认插槽：
// ParentComponent.vue (Vue 3) <template> <div> <ChildComponent> <template #default="slotProps"> <!-- slotProps 包含了子组件传递的数据 --> <div> 商品：{{ slotProps.data.name }}，价格：￥{{ slotProps.data.price }} (父组件自定义) </div> </template> </ChildComponent> <!-- 简写形式 --> <ChildComponent> <template #="slotProps"> <div> 商品：{{ slotProps.data.name }}，价格：￥{{ slotProps.data.price }} (父组件自定义) </div> </template> </ChildComponent> <!-- 再进一步简写形式 --> <ChildComponent #="{ data }"> <div> 商品：{{ data.name }}，价格：￥{{ data.price }} (父组件自定义) </div> </ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, }; </script>可以看到，
v-slot:default="slotProps"可以简写为#default="slotProps"， 甚至可以简写为#="{data}", 更加简洁。
第四幕：v-slot 的例外情况——单文件组件的根节点
在Vue 3中，如果你的组件是单文件组件，并且只想使用默认插槽，那么 v-slot 可以直接用在组件标签上，而不用 <template> 标签包裹。 这是 v-slot 唯一可以不用在 <template> 标签上的情况。
// ParentComponent.vue (Vue 3)
<template>
<div>
<ChildComponent #="{ data }">
<div>
商品：{{ data.name }}，价格：￥{{ data.price }} (父组件自定义)
</div>
</ChildComponent>
</div>
</template>第五幕：Vue 2 和 Vue 3 的差异总结
为了更清晰地对比Vue 2和Vue 3在作用域插槽方面的差异，我们用表格来总结一下：
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 指令 | slot-scope |
v-slot |
| 作用范围 | <template> 标签 |
<template> 标签 (单文件组件根节点除外) |
| 命名插槽 | <template slot="插槽名" slot-scope="变量名"> |
<template v-slot:插槽名="变量名"> |
| 默认插槽 | <template slot="default" slot-scope="变量名"> |
<template v-slot:default="变量名"> 或 <template #default="变量名"> 或 #="变量名" 或 #{变量名} (单文件组件根节点) |
| 语法 | 略显繁琐 | 更加简洁、直观 |
| 推荐使用 | 不推荐（已废弃） | 强烈推荐 |
总结：
Vue 3的 v-slot 语法更加简洁、直观，也更符合Vue 3的设计理念。虽然Vue 2的 slot-scope 还能用，但是官方已经不推荐使用了，所以建议大家尽快迁移到 v-slot。
彩蛋：作用域插槽的应用场景
- 自定义列表渲染： 父组件可以自定义列表项的样式，例如，添加不同的背景颜色、边框样式等。
- 表格列自定义： 父组件可以自定义表格列的内容，例如，根据不同的数据类型显示不同的格式。
- 表单验证提示： 子组件可以把验证结果传递给父组件，让父组件可以自定义验证提示的样式。
- 各种复杂组件的灵活定制： 允许父组件高度定制子组件的渲染逻辑。
结束语：
好了，今天的讲座就到这里了。希望通过今天的讲解，大家对Vue的作用域插槽有了更深入的理解。记住，多练习、多实践，才能真正掌握这些知识。 如果大家还有什么疑问，欢迎在评论区留言，我会尽力解答。 祝大家编程愉快！
（挥手告别，期待下次再见！）