本文主要分享关于组件化开发的理解，让刚入门的小伙伴少走一些弯路，提高开发效率，作者本人也是新手，如有不当之处，请大佬指出，感谢。
相信很多刚入门的小伙伴，经常会写很多重复的代码，而这些代码一般情况下也都是大同小异，在这种情况下，如何让开发和学习变得更加高效，组件化的思想就显得尤为重要。这里通过设计一个简单的弹出框，给小伙伴们分享组件化的应用。
组件&组件化
组件化是对某些可以进行复用的功能进行封装的标准化工作。组件一般会内含自身的内部UI元素、样式和JS逻辑代码，它可以很方便的在应用的任何地方进行快速的嵌入。组件内部可以使用其他组件来构成更复杂的组件。
在实际的开发中，我们应该避免去编写重复的代码，将精力放在更加核心的部分，因此就需要将这些重复的代码抽取出来，封装成公共的组件，提高开发效率，但同时也要注意组件的健壮性和可复用性，让它能够尽可能适应更多的场景。
基本结构
首先是弹出框的基本结构
<div> <div></div> <div> <div> <span>标题</span> <a href="javascript:;"></a> </div> <div> <slot></slot> </div> <div> <a href="javascript:;">确定</a> <a href="javascript:;">取消</a> </div> </div> </div> </div>
基本结构很简单，稍微注意一点的就是 slot 插槽，如果没有提供name属性，它将有一个隐含的名字default，并且在父组件如果没有指定 slot 的 v-slot 属性的话，内容会传给default插槽。
在这里定义了 slot 的name属性 body ，这种的叫做具名插槽，会匹配 v-slot:body 的内容。
注意，在父组件中调用需要用 <template> 包裹，并且 <template> 元素中的所有内容都将被传入相应的插槽。
给弹出框加点样式
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.5; } .modal-dialog { position: absolute; top: 40%; left: 50%; width: 560px; height: auto; background-color: #ffffff; transform: translate(-50%, -50%); .modal-header { height: 60px; background-color: #F5F5F5; padding: 0 25px; line-height: 60px; font-size: 16px; .icon-close { position: absolute; top: 23px; right: 25px; width: 14px; height: 14px; background: url("/static/img/icon-close.png") no-repeat center; background-size: contain; } } .modal-body { padding: 42px 40px 54px; font-size: 14px; } .modal-footer { height: 82px; line-height: 82px; text-align: center; background-color: #F5F5F5; } } }
我这里使用的是 scss ，使用的时候别忘了安装 node-sass 和 sass-loader ，现在我们的页面是这个样子了
虽然还是不太美观，但是已经基本上是一个弹出框的雏形了，并且我没有给 a 标记样式，原因在后面。
SCSS函数
回过头再看看上面的 css 代码，这里重复写了4次固定定位的代码，而且随着项目的推进，肯定还有更多类似的代码，何不将这些部分抽取出来，进行封装呢？ scss 提供了这个功能，将 css 封装成函数，这里的函数直接会返回函数体。我们在遇到类似的情况时，就能够直接复用。
在 assets 目录下新建 scss 文件夹并在里面新建 mixin.scss ，在里面新建 position 函数,代码如下：
@mixin position($pos: absolute, $top: 0, $left: 0, $w: 100%, $h: 100%) { position: $pos; top: $top; left: $left; width: $w; height: $h; }
接着我们引入 mixin.scss ，用 position 函数替换我们原先的代码
通过@include方式使用 scss 函数： @include position(fixed); 括号里面的是参数。
关于按钮
每一个网站都有很多按钮，不过，同一个网站的按钮风格大多都是一样，无非是大小不一。因此可以单独在 scss 文件下新建 button.scss 然后在 App.vue 里面引入这个文件，在后面除了一些特别的样式，其它就不需要给按钮定义样式了，这样也便于维护。这里给出我的 button 文件，可以参考一下。
.btn { display: inline-block; width: 110px; line-height: 30px; text-align: center; background-color: #FF6600; color: #ffffff; border: none; cursor: pointer; } .btn-default { background-color: #b0b0b0; color: #d7d7d7; } .btn-large { width: 202px; height: 50px; line-height: 50px; font-size: 18px; } .btn-huge { width: 300px; height: 54px; line-height: 54px; font-size: 16px; } .btn-group { .btn { margin-right: 20px; &:last-child { margin-right: 0; } } }
为了复用