Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑），2024年最新

页面中多出了在A中用B包裹的内容。没错，这就是插槽的基本使用，是不是很简单？

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

如上面的例子，当组件渲染的时候，<slot></slot> 将会被替换为“验证插槽是否生效”（即指定内容）。插槽内可以包含任何模板代码，包括 HTML：

我是A组件

验证插槽是否生效 //内容为html

页面效果如下：

插槽内也可以放其他组件，如此时再新建一个组件C：

我是C组件

在A组件中，将B组件包裹的内容换成C组件：

我是A组件

//插入C组件

页面效果如下：

此时检查页面元素，我们会发现，在原本B组件中的位置，替换成了C组件：

//B.vue

我是B组件

//观察页面元素,被替换成C组件

也印证了开篇对插槽作用的解释，即使用的组件指定的位置留一个坑，如果在外部，使用其组件包裹某内容（可以是任何模板代码，也可以是HTML，还可以是组件），则该内容就会被分发到处（一个有趣的说法就是把“坑”补上），渲染出来。当然，也可以不放任何内容，不影响组件渲染，就好比最开始的情况。

注意：如果B组件的 t