slot（插槽）

Posted 2023-03-15

参考技术A

slot 又称插槽，是Vue的内容分发机制，组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。
插槽 slot 是子组件的一个模板标签元素，而这一个标签是否显示，以及如何显示都是由 父组件 所决定的。

slo t可分为三类：默认插槽、具名插槽以及作用域插槽。

默认插槽：又名 匿名插槽 ，当 slot 没有指定 name 属性值的时候一个默认显示插槽， 一个组件内只能有一个匿名插槽 。
子组件内部定义插槽， 插槽一定要放在子组件中

父组件中使用

在子组件中定义插槽时，给对应的插槽分别起个名字，方便后续父组件将内容根据 name 来填充到对应的位置。
使用具名插槽的方法：

如上所示，”标题“最终会替换掉”中间的“显示

插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件。 作用域插槽就可以通过子组件绑定数据传递给父组件。

slot-scope 就相当于是一个对象，这个对象里面的数据就是子组件插槽绑定传上来了。在 vue 2.5.0+ slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。