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

优化之后的代码，避免了一值多判断的缺点，减少冗余，更加灵活， 这种方式较适合业务简单，使用次数多的组件