快速掌握:插槽，具名插槽，作用域插槽（slot）（name）(slot-scope)的区别与使用

在使用vue发的过程中，vue的组件化语法使得我们的项目更加的分工明确，同时也带来了复用性的便捷，插槽就是一个组件复用的小方法。那么现在我们来看看Vue中的插槽以及它的扩展怎么使用吧！

 普通插槽

vue中，以组件形式存在的标签通常情况下是不能包含其他子标签的，例如:

 

 如上图可见，我们在one标签中插入了根组件中的内容，运行效果如下:

 我们发现并没有任何变化，

当我们使用插槽后,根组件内容不变~

 

 效果如下:

 正如上面所知，在父组件向子组件标签插入的内容正好被子组件中的<slot><slot>所接受

但是，如果我们需要多个插槽不同内容呢？ 

 具名插槽

 这里我们就可以用到具名插槽了，(插槽的使用情形根据工作项目中的情况而定)

 正如图，我们在one组件中声明了三个插槽 name分别是one ，two，three 

 效果图如下:

 在根组件中，用slot对应不同的name，相应的插入不同的插槽中，

那么什么是作用域插槽呢？

 当我们插入的内容需要根据子组件中的内容去渲染时，我们此时就需要用到作用域插槽

 

 子组件中，我们声明了一个arr数组，数组内有着不同的内容

 slot-scope="data" 可以拿到组件中定义的  :datas  从而渲染数据

效果图如下:

 slot 具名 slot   slot-scope 的使用就讲到这了，希望对你所帮助