VUE_render渲染函数基础使用,使用render函数创建自定义按钮
创建组件button
components/button.vue
<script> export default { props:{ type:{ type:String, default:"" }, text:{ type:String, default:"" } }, render(h) { //h:createElement return h('button',{ //v-bind:class class:{ 'btn':true, 'btn-success':this.type === 'success', 'normal':!this.type }, //dom属性 domProps:{ innerText:this.text || '未传入按钮文字' }, //on => v-on }) }, } </script>
<style scoped> .btn{ width: 200px; height: 50px; line-height: 50px; background: green; border-radius: 7px; border: none; } .btn-success{ background: goldenrod; } .normal{ background: red; } </style>
使用
<template>
<div class="home">
<div>
<Button :type="'success'" :text="'botton'" />
</div>
</div>
</template>
<script> // @ is an alias to /src import Button from '@/components/button.vue' export default { name: 'Home', components: { Button } } </script>
还没有评论,来说两句吧...