关于插槽那点事

属于每次面试都会被问到，懂但是不知道咋说那种（好吧，主要是我菜我不会），所以今天专门整理一下
我学一个新东西一般都是“3W1H”

Vue 实现了一套内容分发的 API，将元素作为承载分发内容的出口。说白了slot就是个槽口就是个坑（此坑非彼坑），你在使用组件时可以拿内容去填坑，子组件在自己的模板中去渲染父组件传递过来的内容。

丰富组件内容和布局的灵活性，增强组件的扩展性和实用性，让用户可以去更好地复用组件和对其做定制化处理

其实知道了为什么用就大致知道了在哪用，这个没有硬性要求。例如如果父组件在使用到一个复用组件的时候，在不同的地方有少量的更改，这种情况没有必要去重写，此时我们就可以使用插槽。当然还需根据自己项目实际情况来，不做过多赘述

插槽分为三种：默认插槽、具名插槽以及作用域插槽
常规使用组件

//APP.vue

MySlot内容

this is start
this is end

效果如下

effect1.png

父组件在子组件处插入内容


  该我表演了

子组件：

this is start
  
this is end

效果如下：

effect2.png

检查代码元素，发现以上代码就相当于

element.png

有的小伙伴可能会问那它有没有默认值呢，我们之前学过的很多东西都有默认值，例如函数参数，props，provide/inject等等，答案是有的，我们直接在槽口里面写入默认模版/代码即可，如

//父组件

//子组件
this is start
     如果你看到我，那我就是默认值，没有人和我玩
this is end

效果

effect3.png

以上代码就相当于

dmslot3.png

如果我们派发不止一个元素那将显示哪个呢？第一个？最后一个？还是所有
光说没用，咱得试试

//父组件

  该我表演了
  瞅瞅

效果：

effect4.png

如果我们有多个槽口呢？都显示吗？

//子组件
this is start
     如果你看到我，那我就是默认值，没有人和我玩
     如果你看到我，那我就是默认值，没有人和我玩
     如果你看到我，那我就是默认值，没有人和我玩
this is end

效果：

effect5.png

那可不，都显示了呢
还有没有问题，没有问题我提了啊。如果我要指定某元素派发到某槽口呢？例如刚刚你是发传单，见人就发，现在我只让你发给穿黄衣服的人。也就是我们现在要在父组件中，精确的在想要的位置，插入对应的内容呢，这就引出了具名插槽

//子组件
this is start
   如果你看到我，那我就是默认值，没有人和我玩
   如果你看到我，那我就是默认值，没有人和我玩
   如果你看到我，那我就是默认值，没有人和我玩
this is end

父组件通过v-slot : name 的方式添加内容：

注：为了方便，书写 v-slot:xx 的形式时，可以简写为 #xx。自己可以试试，我就不演示了
另外说一点插槽名也是有默认值的，默认值很默认，那就是default。。。例如

//子组件
this is start
   如果你看到我，那我就是默认值，没有人和我玩
   如果你看到我，那我就是默认值，没有人和我玩
   如果你看到我，那我就是默认值，没有人和我玩
   如果你看到我，那我就是默认值，没有人和我玩
this is end

父组件：

1.png

作用域插槽
插槽和模版都有编译作用域，父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。父组件不能直接使用子组件内的数据，那怎么才能访问子组件作用域，使用子组件的数据呢？我们把需要传递的内容绑到上，然后在父组件中用v-slot设置一个值来接收我们传递过来的数据：

//父组件

//子组件
  
    this is start
    //d1、d2都是我定义在data中的数据
     这就是默认值1
     这就是默认值2 
    this is end

效果如下：

effect.png

铛铛铛～完结撒花，如有不对欢迎指正。觉得有帮助的话记得点个赞哦