Vue封装Button组件思路及实现

引言

像平时前端开发中，我们经常使用elementUI，iviewUI，移动端vant，mint等等。那么他们的封装是如何实现的呢。

使用到的知识点

整体用到的vue的相关知识为：
prop
官方：Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。
通俗：父组件引用子组件并给子组件增加一个属性，并可以传递数据
插槽
官方：Vue 实现了一套内容分发的 API，将 slot元素作为承载分发内容的出口。
通俗：给一个组件传递一些内容
$emit
官方：监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
通俗：子组件可以使用 $emit 触发父组件的自定义事件，传递数据

举例

接下来就用常用的Button组件做例子。
要求及思路：

1. 封装的组件要有基本的自定义功能，颜色，形状，类型等，并通过自定义属性进行传值（使用父传子prop的功能实现 ）
2. 对于样式的处理（先写好使用的样式，然后通过自定义属性去判断使用哪个样式）
3. 使用$emit将能够使用到的事件传递出去

展示

外部Vue使用：(简写)

    import {
    Button } from '@/components/Button/index'
    <div>
      <p class="explain_title">按钮类型</p>
      <Button type="normal">普通按钮</Button>
      <Button type="default">默认按钮</Button>
      <Button type="error">警告按钮</Button>
      <Button type="success">主要按钮</Button>
      <Button type="warning">警告按钮</Button>
    </div>
    <div>
      <p class="explain_title">朴素按钮</p>
      <Button plain type="normal">普通按钮</Button>
      <Button plain type="default">默认按钮</Button>
      <Button plain type="error">警告按钮</Button>
      <Button plain type="success">主要按钮</Button>
      <Button plain type="warning">警告按钮</Button>
    </div>
    <div>
      <p class="explain_title">圆角按钮</p>
      <Button circle plain type="normal">普通按钮</Button