Vue3—06—插槽slot

---

 

 

一、插槽用来干什么？

可以用props来转递数据，

但是传递html标签这种结构怎么做？使用插槽slot；

 

slot可以让父组件来决定，这一块到底放什么标签、内容、元素；

 

 

 

 

 

 如果有多个插槽，并且灭有具名插槽和动态插槽名，如下图所以，那么每个插槽都会被插入父组件的内容，所以下图会有九个内容；

 

 2.具名插槽

 

 具名插槽也可以简写：

 

 

3.动态插槽名

可以使用【】来像v-blind一样，获取组件逻辑data里的属性，然后给标签的slot属性赋值；

 

 

 

 

 二、作用域插槽

子组件的数据如果不通过emit和on是不可能传到父组件的，父组件也无法使用；

 

 

这个时候，父组件使用v-slot=“自定义一个名字”会获取子组件slot标签里的值；

这个时候就不用通过子父组件才可以传数据了，直接通过作用域插槽就可以传数据；

 

 

2.作用域插槽可以缩写

如果只使用一个插槽那么可以简写，但如果我们使用了多个插槽，并且用到了具名插槽，就不可以简写；

 

 

看最后一张图片，作用域插槽和具名插槽的区别：一个是等于号一个是冒号；