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

妖狐艹你老母 2022-11-04 00:51 414阅读 0赞

在这里插入图片描述

创建组件button

components/button.vue

  1. <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>
  2. <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>

使用

  1. <template>
  2.   <div class="home">
  3.     <div>
  4.       <Button :type="'success'" :text="'botton'" />
  5.     </div>
  6.   </div>
  7. </template>
  9. <script> // @ is an alias to /src import Button from '@/components/button.vue' export default { name: 'Home', components: { Button } } </script>

发表评论

表情：
评论列表 （有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读