VUE render函数使用

- - - render函数拯救繁乱的template - - -

在vue开发中，因为要控制不同的变量展示不同的模块，所以频繁的使用了v-if 、v-if-else、v-show等。使得页面过于繁乱，所以可以自己封装一下自己的组件

复杂的判断

<template>
  <div>
    <h1>复杂的判断</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>

<style scoped lang="less">
</style>

开始封装， 创建一个button.vue

<script>
export default {
    props:{
        type:{
            type:String,
            default:'normal'
        },
        text:{
            type:String,
            default:'button'
        }
    },
    render(h){
        /*
            h 类似于 createElement
            rander函数不等于<template></template>
            rander是为了弥补template的不足而生的， 相辅相成的关系
         */
        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>

<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>

在需要的组件在引入注册，通过数据来驱动展示内容

<template>
  <div>
    <h1>封装后</h1>
    <!-- 按钮根据value显示不同类型的button -->
    <Button :type='type' :text='text' @myClick='save'></Button>
  </div>
</template>

<script>
import Button from './button.vue'
export default {
  name: 'Home',
  data(){
    return{
        value:1，
        text: '我是要展示的第一个按钮',
        type: 'success'
    }
  },
  components:{
      Button
  },
  methods:{
  	save () {
  		console.log('保存成功')
  	}
  }
}
</script>

<style scoped lang="less">
</style>