Vue中插槽的使用。

写在前面：

　　vue中插槽的使用让组件变得更加灵活。使得封装一个组件的复用性和API的暴露更加灵活多变。

当组件当做标签使用的时候，在标签里面的元素不会显示，这个时候就需要用到插槽。

一、最基本的使用

　　当组件当做标签使用的时候，在组件标签内部的标签往往不显示，这个时候就需要用到插槽。写在组件标签内部的标签需要在该组件标签内部使用solt接收，solt标签会将所有标签在同一位置接收显示。但是灵活的不高。

二、命名插槽的使用

　　给组件标签内部标签添加一个solt的属性，属性值为插槽的名字。在组件内部使用solt标签进行接收，solt标签添加一个name属性，name的属性值为solt的属性值，这样可以在不同位置进行显示，加大了插槽的灵活度。

三、作用域插槽

　　当组件当做标签使用的时候，如果需要将插槽中的数据需要使用组件内部数据的时候，需要在组件内部的标签外部添加一个template的标签，添加一个scoped的属性，值为任意值（porps），用来接收组件内部传递过来的值。通过属性值（props).属性（组件内部定义属性）接收。

在这里说一下封装一个组件需要注意的问题：

　　1，组件的复用性。

　　2，需要暴露的API。

在这里举一个例子，如何封装一个轮播图，在这里先考虑的是轮播图的结构是否一样，如果结构是定死的，我们就不必使用插槽，直接将轮播图组件写死，把轮播图使用的数据暴露出去，这样便于数据的更新。如果轮播图的样式不一，可以使用插槽来增强轮播图的灵活度，把样式暴露出去，数据写在轮播图组件里。

　　

转载于:https://www.cnblogs.com/PrayLs/p/10428017.html