優雅的使用VUE----「拯救繁亂的template」

很多人在寫組件的時候，會依賴腳手架中的標籤，其實template也存在一定的缺陷，例如：

• template裏存在一值多判斷
• 過多使用template會使代碼冗餘，雜亂

VUE給我們提供了一個render函數，我們可以通過這個函數巧妙的解決template造成的問題

// 父組件引入
<template>
  <div>
    <h1>I am Home</h1>
    <!-- 按鈕根據value顯示不同類型的button -->
    <Button type='success' text='button1' @myClick='...'></Button>
  </div>
</template>
import Button from './button.vue'

// 公共button組價冗餘寫法
<template>
  <div>
    <h1>I am Home</h1>
    <!-- 假設按鈕有多種類型,通過value來顯示不同類型 -->
    <div v-if='value === 1'>
      <button>button1</button>
    </div>
    <div v-else-if='value === 2'>
      <button>button2</button>
    </div>
    <div v-else>
      <button>button3</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data(){
    return{
        value:1
    }
  },
  methods:{
  }
}
</script>
// 上面這種寫法，當出現多種類型的button，就會顯得雜亂無章，
//當然，很多人會選擇去封裝一個button組件，那麼這個組件的封裝，
//又是一個技巧點，利用VUE的render函數，減少不必要的template，因此我們可以這樣寫
<script>
export default {
    props:{
        type:{
            type:String,
            default:'normal'
        },
        text:{
            type:String,
            default:'button'
        }
    },
    render(h){
        /*
            h 類似於 createElement， 接受2個參數
            1 - 元素
            2 - 選項
         */
        return h('button',{
            // 相當於 v-bind:class
            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>

優化之後的代碼，避免了一值多判斷的缺點，減少冗餘，更加靈活， 這種方式較適合業務簡單，使用次數多的組件