插槽的使用说明

目录

1.说明

2.分类

3.总结

---

1.说明

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签，父组件填充的内容称为插槽内容。

• 子组件不提供插槽时，父组件填充失效
• 父组件无填充时，中的备用内容会启用生效
• 父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的，互不影响

2.分类

(1)默认插槽

①示例

子组件：

 父组件：

结果1：

 

父组件：

结果2：

父组件：

结果3：

 

②说明

在父组件中引入子组件时没有给插槽赋值时，备用内容会生效。

在子组件的slot中未设定插槽的名字，则默认名为default，在父组件中通过一下两种方式对插槽内容进行设置，如下：

        #插槽名：#default

        v-slot:插槽名：v-slot:default

所以上面中的结果2和结果3是一致的。

插槽中可以填充任何模板代码。

(2)具名插槽

具名插槽是指 元素设置一个特殊的属性name，用来给各个插槽分配唯一的 ID，用来给特定的插槽设置内容。

①示例

子组件：

父组件：

结果：

 

(3)作用域插槽

作用域插槽可以让父级外层组件能够访问子组件的数据，子组件向将数据提供给插槽，组件 props 传递数据的方式，子组件向插槽传递一个attributes，父组件通过v-slot带的值（任意命名）来获取子组件的数据。

①示例：

子组件：

父组件：

 

结果：

 

②说明

 通过作用域插槽，父组件可以获取子组件的信息。常见的场景如在表格后面追加操作列，在操作列中添加按钮，在按钮操作中需要将当前行的数据传递到点击事件中，这是需要获取子组件中此行的数据，这是使用了作用域插槽，
有的框架中的作用域插槽使用的是默认作用域插槽，即插槽名称为default，有的使用的是具名作用域插槽。

(4)具名作用域插槽

具名作用域插槽就是给插槽设置name属性

①示例：

子组件：

父组件：

结果：

说明：

父组件中作用域插槽的名字可以任意，也可以直接解构出来进行使用

(5)动态插槽

动态插槽是指插槽的名字可以设置变量。

①示例

子组件：

父组件：

结果：

3.总结

在前端开发中，插槽的使用很广泛，常见的如在表格中的使用，获取当前行的内容，当前行的下标，设置一些标题等等，使用前端模板框架时，可以根据说明文档，进行使用

参照：

插槽 Slots | Vue.js

vue3 | 插槽的使用_vue3具名插槽的用法-CSDN博客