VUE_render渲染函数基础使用，使用render函数创建自定义按钮

最新推荐文章于 2024-08-15 16:42:09 发布

小歪 | 前端

最新推荐文章于 2024-08-15 16:42:09 发布

阅读量1.1k

点赞数

分类专栏： # VUE

本文链接：https://blog.csdn.net/weixin_44599931/article/details/114253154

版权

VUE 专栏收录该内容

114 篇文章 3 订阅

订阅专栏

在这里插入图片描述

创建组件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>