Vue 插槽全攻略：重塑组件灵活性

前言

 📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！

 🍅 个人主页：南木元元

---

目录

什么是 slot 插槽

默认插槽

编译作用域

后备内容

具名插槽

作用域插槽

应用场景

动态插槽名

废弃的插槽语法

默认插槽

具名插槽

作用域插槽

总结

结语

---

什么是 slot 插槽

Vue 官方文档：Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口。

通俗来讲，就是“占坑”，使用 在子组件模板中占好位置，父组件就可以向其中传递一些内容。

Vue 的插槽可以分为三类：

• 默认插槽
• 具名插槽 
• 作用域插槽

默认插槽

默认插槽 又名 匿名插槽，是最简单的插槽形式，当 slot 没有指定 name 属性值的时候为一个匿名插槽（一个组件内只有一个匿名插槽）。

示例：

// 子组件 Child


// 父组件 Parent（引用子组件 Child）

渲染结果：

子组件中使用默认插槽 slot，实现了父组件向子组件的指定位置插入一段内容，即内容的分发。

编译作用域

我们可以通过 slot 向子组件传递父组件内任意的 data 值，比如：

// 父组件 Parent（引用子组件 Child）

但我们能否直接使用子组件内的数据呢？答案是不行的。

// 子组件 Child



// 父组件 Parent（引用子组件 Child）

因为有一条规则：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容

后备内容，就是 slot 的默认值，有时我们没有在父组件中提供内容，那么 slot 就会显示默认值，如：

// 子组件 Child


// 父组件 Parent（引用子组件 Child）

渲染结果：

具名插槽

具名插槽 是指带有 name 属性的 slot，一个组件可以出现多个具名插槽。

有时需要多个插槽，我们就可以使用具名插槽，根据名称将不同内容 精确分发 到不同位置。

示例：

子组件

// 子组件 Child

父组件中，需要在一个

// 父组件 Parent（引用子组件 Child）

渲染结果：

注意：上面示例中，

主要内容区
// 上面等价于下面这种写法

作用域插槽

前面我们说过，父组件中不能直接使用子组件内的数据。如果父组件要使用子组件中的数据，我们可以使用 作用域插槽。该插槽可以将子组件数据传给父组件，让父组件根据子组件的传递过来的数据决定如何渲染内容。

// 子组件 Child




// 父组件 Parent（引用子组件 Child）

渲染结果：

应用场景

作用域插槽在组件封装时非常有用，它能够在保持组件逻辑封装的同时，还能允许父组件根据子组件的数据进行自定义渲染，从而在增强组件复用性和灵活性的同时保持良好的封装性。

我们来看个案例：下面封装了一个列表组件，主要负责渲染展示一个列表，数据由父组件传递。

// 子组件 Child



// 父组件 Parent（引用子组件 Child）

效果：

但存在一些问题，当有些页面需要复用该组件展示列表时，比如，需要在 title 处增加一个图标，或者在展示内容时不显示编号 1、2、3，就不够灵活。

这时，我们就可以通过作用域插槽，将列表元素内容和样式的控制权交给使用它的父组件来控制。

复用该组件时在 title 处添加图标：

// 子组件 Child




// 父组件 Parent 控制标题的显示（引用子组件 Child）

效果：

展示内容时不显示编号 1、2、3：

// 父组件 Parent 控制列表元素的显示（引用子组件 Child）

效果：

通过作用域插槽，父组件完全控制了如何展示列表项，而不需要修改子组件的内部逻辑。

动态插槽名

2.6.0 新增：动态插槽名

动态指令参数 也可以用在 v-slot 上，来定义动态的插槽名：

这里方括号中的 dynamicSlotName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。

废弃的插槽语法

以上的插槽语法是 Vue 2.6.0 后的语法，在这之前，插槽语法为 slot（默认插槽或具名插槽）和 slot-scope（作用域插槽）。

vue 官网：v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

默认插槽

父组件省略不写或者在 template 上使用 slot 属性：slot=”default”，将内容从父级传给默认插槽。

// 子组件 Child


// 父组件 Parent（引用子组件 Child）

具名插槽

父组件在 template 上使用 slot 属性：slot=”name”，将内容从父级传给具名插槽。

// 子组件 Child


// 父组件 Parent（引用子组件 Child）

作用域插槽

父组件在 template 上使用 slot-scope 属性，可以接收传递给插槽的 prop。

// 子组件 Child




// 父组件 Parent（引用子组件 Child）

效果：

slot-scope 属性也 可以直接用于非 。

slot-scope 的值可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达式，即 可以在表达式中使用 es6 解构，这样写法就更加简洁了。

总结

最后我们来做一个小小的总结：

结语

🔥如果此文对你有帮助的话，欢迎💗关注 、👍 点赞 、⭐ 收藏 、✍️ 评论，支持一下博主~