前端技术社区总目录（订阅之前请先查看该博客）

示例效果

默认插槽（匿名插槽）

插槽 slot 通常用于两个父子组件之间，最常见的应用就是我们使用一些 UI 组件库中的弹窗组件时，弹窗组件的内容是可以让我们自定义的，这就是使用了插槽的原理。

（1）slot 是 Vue中的内置标签。
（2）slot 相当于给子组件挖出了一个槽，可以用来填充内容。
（3） 父组件中调用子组件时，子组件标签之间的内容元素就是要放置的内容，它会把 slot 标签替换掉。

注：
（1）slot 标签内的内容就是默认内容，也就是当父组件没有传递给子组件内容时，子组件就会默认渲染 slot 内部的内容，但是 slot 标签是不会渲染出来的。
（2）插槽内容可以访问到父组件的数据作用域
（3）插槽内容无法访问到子组件的数据

父组件代码

&