Vue 2.0学习笔记：创建Button组件

在上一节中，咱们学习了Vue中怎么创建组件。在这篇文章中我们以按钮组件为例，了解了怎么注册全局组件和局部组件。并且通过这些基础知识，可以轻易的创建类似于HTML中button元素效果的按钮组件。但这个组件非常的简陋，和我们想像的组件相差甚远。那么今天我们来看看，怎么在Vue中创建一个按钮组件。

以Bootstrap的按钮为例

很多人说Bootstrap很拙逼，灵活性不够。但我不这么认为，我是Bootstrap的粉丝，我一直很推崇Bootstrap。并不是因为其效果有多牛逼，我膜拜的是他的设计思想。别的不多说了，今天我们的目的是使用Vue来创建一个按钮组件。那么我们就用Bootstrap的按钮来举例。在Bootstrap中的按钮分为Buttons和Button组两个组件，今天先来看Buttons组件。

先来简单的回忆Bootstrap的Buttons组件，其效果和使用方式如下：

简单分析

该组件是从Bootstrap4中获取的。正如上图所示，按钮中有很多不同的类和参数，所以我们将创建一个组件来完成。该组件是可以双向绑定的，也可以用于不同的地方。

根据Bootstrap的按钮风格，我们将处理各种属性，比如：

• btnText：按钮的文本

• btnSize：按钮的大小，在Bootstrap中是通过btn-lg、btn-sm来控制

• btnType：按钮的类型，在Bootstrap中是通过btn-primary、btn-secondary、btn-success、btn-danger、btn-warning、btn-info、btn-light和btn-dark等类名来控制

• btnOutline：边框按钮，在Bootstrap中是通过btn-outline-primary、btn-outline-secondary、btn-outline-success、btn-outline-danger等类名来控制

• btnActive：按钮的状态，它是一个布尔值，用来控制按钮是否是当前状态，在Bootstrap中，如果有active类名，表示按钮是当前状态(激活状态)

• btnBlock：按钮是不是块级元素，它也是一个布尔值，在Bootstrap中通过btn-block类名来控制，如果有这个类名，按钮是一个块级元素

这是对于Bootstrap中单个按钮会碰到的各种样式风格。在BootStrap中，还有一个按钮组的概念：

咱们先看看Vue怎么来写button组件。

创建按钮组件

通过前面的对Bootstrap组件的分析，可以得知，创建button组件时，其对应的props属性将会有btnText、btnSize、btnType、btnOutline、btnActive和btnBlock。而在上一节中，我们知道怎么注册组件。那么接下来，直接使用注册组件的语法糖来创建。

Vue.component('vue-button', {
    props: [        
        'btnText',    // 按钮文本内容
        'btnType',    // 按钮类型
        'btnSize',    // 按钮尺寸大小
        'btnOutline', // 只有边框的按钮样式
        'btnActive',  // 按钮状态，是一个布尔值，true表示激活（当前状态）
        'btnBlock'    // 按钮是不是块元素，是一个布遥值，true表示块元素
    ],
    template: `
        <button type="button" class="btn" 
            :class='[computedType, computedSize, computedOutline, computedActive, computedBlock]'
        >{
    { btnText }}</button>
    `,
    computed: {        
        // 控制按钮的类型
        computedType: function () {
      
            return `btn-${
    this.btnType}`
        },        
        // 控制按钮大小尺寸
        computedSize: function () {
      
            return `btn-${
    this.btnSize}`
        },        
        // 控制按钮边框
        computedOutline: function () {
      
            return `btn-outline-${
    this.btnOutline}`
        },        
        // 控制按钮是否激活
        computedActive: function () {
      
            return  this.btnActive === 'true' ? 'active' : ''
        },        
        // 控制按钮是否是块元素
        computedBlock: function () {
      
            return this.btnBlock === 'true' ? 'btn-block' : ''
        }
    }
})

上面的代码其实表示我们已经完成了按钮组件的注册，在继续往下之前，先试着了解已经完成的工作：

• 使用Vue.component(tagName, options)注册了一个button组件，这个组件的标签为vue-button；并且在这个组件中设置了props、computed两个选项

• 给props属性设置了一个数组，数组中的值为btnText、btnSize、btnType、btnOutline、btnActive和btnBlock，这些都是我们控制按钮想要的属性，而这些属性都是来自Bootstrap的类（熟悉Bootstrap的同学一目了然）

• 在computed中对属性值进行计算，以便正确的类可以用到模板中。你也看到了类的实现，使用的是数组的形式。有关于样式怎么绑定到Vue的组件中，可以点击这里进行了解

• 计算值在将类追回到类数组中起主要作用，并根据对应的类获取所需要的样式，呈现对应的外观

这个例子让我对计算属性（computed）和如何在计算值时考虑到组件的避性以及数据块的属性有了一个更好的理解。在Vue中，除了使用computed之外，还可以使用方法（methods）和观察者（watch）。具本使用哪一种方式，可以根据自己的需求和应用场景来决定。如果你想了解这三者的不同之处，可以点击这里进行了解。

使用按钮组件

组件已经注册OK了，现在可以在Vue的实例中使用该组件。

<div id="app">
    <div class="container">
        <div class="block">
            <vue-button btn-text="Primary" btn-type="primary"></vue-button>
            <vue-button btn-text="Secondary" btn-type="secondary"></vue-button>
            <vue-button btn-text="Success" btn-type="success"></vue-button>
            <vue-button btn-text="Danger" btn-type="danger"></vue-button>
            <vue-button btn-text="Warning" btn-type="warning"></vue-button>
            <vue-button btn-text="Info" btn-type=