vue3 插槽详解

一、插槽的应用场景

       在某些场景中，封装组件，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。由此出现了插槽

二、插槽的内容与出口

1、出口

封装的组件代码如下图所示：

2、 内容

页面对封装组件的应用

注意：为插槽默认指定内容，代码如下图所示

封装组件的代码：

应用组件代码：

运行结果如下图所示：

 

图一  插槽赋值

 

图二  插槽默认值 

三、插槽的分类

1、一般插槽

只有插槽的出口以及内容（赋值内容或者默认内容），无其他信息，用法如上

2、具名插槽

通俗的说，就是有名字的插槽。有时在一个组件中包含多个插槽出口是很有用的， 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容，这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的  出口会隐式地命名为“default”。

 要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的