今天继续卷前端 vue中的插槽slot

slot 与 props 十分相似但也有些许不同

props是父组件往子组件中传值， 子组件中获得值后在模板中使用

而slot是父组件往子组件中传入模板代码

1. 子组件的模板代码中定义<slot>标签, 相当于定义了个槽(埋了个坑), 坑里可以什么都没有, 也可以先放点内容, 如果 如果父组件不往槽里插东西, 就显示默认的内容, 如果插入内容, 就会覆盖默认内容

2. 父组件引入子组件后,  在模板代码中定义   以子组件名称的 <标签> (这一步就是定位到槽的位置了), 然后在标签内写任何代码, 就相当于往子组件的槽中写入内容了

一个组件中, 可以定义多个插槽, 所以就需要用到具名插槽, 简单说就是定义插槽的时候写个别名, 那么在父组件中定位子组件的槽时就可以提供槽的名字了确定插到哪个槽里面了

插槽还支持从子组件中传递属性值到父组件中, 用到了slotProps这个属性