插槽（slot）的基本使用

时间：2022-09-25 02:30:00 amy限时继电器

一、插槽的作用

在开发过程中，我们经常包装可重复使用的组件：

我们将在前面通过props将一些数据传递给组件进行显示；
但是，为了使组件具有更强的通用性，我们不能将组件中的内容限制为固定div、span等等这些元素；例如，在某些情况下，我们使用组件，希望组件显示一个按钮，在某些情况下，我们使用组件希望显示一张图片，我们应该让用户决定在某个区域存储什么内容和元素。

二、插槽类型不同

在定义组件时，在template中用slot占坑；使用时，填坑组件之间的内容。

1）组件进阶 - 默认插槽

默认插槽代码显示：

插槽预留位置，为以后的扩展做准备，直接用于模板slot 标签即可。

插槽可以接具有默认值slot设置组件可以是自定义组件或系统标签。使用时，直接填写自定义标签并扩展内容（可以是另一个组件，娃娃）。如果没有填充，则使用默认值填充。

插槽只有一个slot标签并不意味着只能在组件标签中填写一个标签html可填充任何一个标签，整体用于更换插槽。

2）组件进阶 - 具名插槽

定义：

使用：

;

输入标签可分别分发给不同的标签slot位置
v-slot一般跟template标签使用 (template是html5.新标签内容模板元素，不会渲染到页面上, 一般被vue分析为内部标签)

显示具名插槽代码：

多个插槽可以预留在模板中，而不是只有一个。

每个插槽可以取一个具体的名字，也可以不取。如果不取，在组件中使用插槽，所有未取的名字都将被替换。

我们可以给需要区域更换的插槽取名，然后在组件中使用特定的标签/子组件slot绑定插槽名称的属性可以实现局部替换。

小积累：

v-bind可省略：

v-on: 可以省略成@

v-slot: 可简化为##

3）作用域插槽

目标: 子组件中的数据，在给插槽赋值时，在父组件环境使用=> 子传父=》传数据

创建子组件，准备slot, 在slot绑定属性和子组件值
使用子组件，自定义标签，用template和v-slot="自定义变量名"
自定义变量名将自动绑定slot上述所有属性，子组件子组件内值，并替换slot位置

变量绑定在组件中slot上, 然后使用组件v-slot:插槽名字="变量" ，会绑定变量slot传递的属性和值，插槽可以自定义显示内容；自定义显示内容可以取出组件中的值。

应用场景：允许用户传输自定义表组件：自定义结构数据(从插槽中返回)

插槽（slot）的基本使用

二、插槽类型不同

1）组件进阶 - 默认插槽

2）组件进阶 - 具名插槽

总结:组件插槽用法 传递html结构内容

使用插槽的目的：

相关文章

总结:组件插槽用法
传递html结构内容