当按钮样式很少的时候，这完全没有问题，但是想象一下，如果你需要十个以上的按钮样式。那么模板写法就很弱了。在这种情况下，使用render函数可以说是最好的选择。根据实际情况重写按钮组件。首先，render函数生成的内容相当于模板的内容。因此，在使用render功能时，需要去掉.vue文件中的template标签。仅保留逻辑层。exportdefault{props:{type:{type:String,default:'normal'},text:{type:String,default:'normal'}},computed:{tag(){switch(this.type){案例'成功'：返回1；案例“危险”：返回2；案例“警告”：返回3；默认值：返回1；}}},render(h){returnh('div',{class:{btn:true,'btn-success':this.type==='success','btn-danger':this.type==='danger','btn-warning':this.type==='warning'},domProps:{innerText:this.text},on:{click:this.handleClick}});},方法：{handleClick(){console.log('----------------------');console.log('做点什么');}}};按照组件思维，能抽象出来的东西，从来不会写成逻辑。这里的clickHandle函数可以根据按钮的类型触发不同的逻辑，就不多描述了。然后在父组件中调用就可以使用jsx了，记住每个参数的类型用的都是一样的，传入参数太麻烦了命令。所以其实可以用jsx来优化这个繁琐的过程。render(){return({this.text}