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