Vue 插槽（slot）详细介绍，2024最新前端高频精选面试题讲解

}

}

B.vue

我是B组件

将B组件引入A组件里面（此时B为A的子组件）

我是A组件

页面效果如下：

准备工作完毕，现在，在B组件里面使用插槽（slot）

我是B组件

//插槽的使用方式

此时页面并无变化（最开始的情况），当然，B组件中使用了插槽slot之后，相当于留下了一个“坑”，占了个位置。 那么如何验证其存在了呢？

此时，修改A组件里面的代码

我是A组件

验证插槽是否生效 //用B组件标签包裹内容，验证slot

此时页面的效果如下：

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

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

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

我是A组件

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

页面效果如下：