「第五届青训营 」伴学笔记创作活动的第 17 天

今天记得是button组件封装。

slot

组件封装之前，我们要理解标签slot的作用，先看下面这张图。

这张图从vue官网引用，用来诠释slot的作用，这张图中< FancyButton >template模板中button下放置slot后，在父元素的下的Click Me会在solt渲染。最总会渲染成

<button>Click Me</button>

所以我们在组件的封装中进场会使用到slot。

button组件封装

第一步先建立一个button标签。并放入slot标签。

slot标签的作用在上面我们已经解释过了。

第二步将组件名称导出

导出后的就可以进行全局注册。由于前面笔记记录了全局注册的实现，这里就不记录。

第三步自定义颜色类型

首先要使用props来接收传入的颜色类型。

上面图中我们使用了vue提供的setup语法糖。所以props是这样定义。然后我们需要在button标签上绑定传入的颜色类型。

在上面图中我们使用计算属性将传入的type做成class类名绑定到button上，以便在css中定义他。

最后我们需要在css中定义type的不同类型。

我们先定义success类型。然后我们在外部组件就可以使用success类型了，实例如下：

如上，我们便完成了非常简单的button组件的封装了。如果需要定义多种颜色类型，只需要接着在css中去定义不同颜色类型对应的样式了。