優雅的使用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>

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章