Vue 帶你封裝一個 button

作爲一個後端程序員偶爾搞搞前端，對我自己來說是打開新的領域，提高自己的競爭力，說實話搞前端和搞後端的思維方式是完全不同的，注重點也是非常不同的，話說今天寶寶我農曆生日哈哈哈哈，開心就寫幾篇放縱一下。

使用 Vue-cli 創建一個 HelloWorld 項目即可作爲起始腳手架。

創建一個 ShowButton.vue 的組件

<template>
  <div>
    <h1>封裝一個 button</h1>
    <div v-if="value === 1">
      <button @click="buttonClick()">button1</button>
    </div>
    <div v-else-if="value === 2">
      <button @click="buttonClick()">button2</button>
    </div>
    <div v-else>
      <button @click="buttonClick()">button3</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShowButton",
  data() {
    return {
      value: 2
    };
  },
  methods: {
    buttonClick() {
      console.log("value" + this.value);
    }
  }
};
</script>

<style>
</style>

這裏用了vue 裏的 v-if 表達式做邏輯判斷，但是如果有 10 個按鈕，那麼就需要寫 10 個 判斷，而且如果該組件還將被別的頁面引用到，那就得還得複製一遍。代碼一點也不優雅呀。

我們藉助於 VUE 給我們提供的 render 函數解決這個問題。
新建一個 Button.vue

<script>
export default {
    props:{
        type:{
            type:String,
            default:'normal'
        },
        text:{
            type:String,
            default:'button'
        }
    },
    render(h){
        /**
         * h 是 createElement 的另一個名稱, 接受 2 個參數，具體可看 vue 文檔
         * 1 - 元素
         * 2 - 選項
         */
        return h('button',{
            class:{
                btn: true,
                'btn-success': this.type === 'success',
                'btn-danger': this.type === 'danger',
                'btn-warning': this.type === 'warning',
                'btn-normal': this.type === 'normal'
            },
            domProps:{
                innerText: this.text || '默認'
            },
            on:{
                click: this.handleClick
            }
        })
    },
    methods:{
        handleClick(){
            this.$emit('myClick')
        }
    }
}
</script>

<style scoped>
.btn{
    width: 100px;
    height:40px;
    line-height:40px;
    border:0px;
    border-radius:5px;
    color:#ffff;
}
.btn-success{
    background:#2ecc71;
}
.btn-danger{
    background:#e74c3c;
}
.btn-warning{
    background:#f39c12;
}
.btn-normal{
    background:#bdc3c7;
}

</style>

ShowButton.vue 內使用

<template>
  <div>
    <h1>封裝一個 button</h1>
    <!-- <div v-if="value === 1">
      <button @click="buttonClick()">button1</button>
    </div>
    <div v-else-if="value === 2">
      <button @click="buttonClick()">button2</button>
    </div>
    <div v-else>
      <button @click="buttonClick()">button3</button>
    </div> -->
     <Button type='success' text='button1' @myClick="buttonClick()"></Button>
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  name: "ShowButton",
  data() {
    return {
      value: 2
    };
  },
  components: {
    Button
  },
  methods: {
    buttonClick() {
      console.log("value" + this.value);
    }
  }
};
</script>

<style>
</style>