Vue中render函数的使用方法


Posted in Javascript onJanuary 31, 2018

render函数

vue通过 template 来创建你的 HTML。但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力。此时,需要用render来创建HTML。

什么情况下适合使用render函数

在一次封装一套通用按钮组件的工作中,按钮有四个样式(default success error )。首先,你可能会想到如下实现

<div v-if="type === 'success'">success</div>
 <div v-else-if="type === 'error'">error</div>
 <div v-else-if="type === 'warm'">warm</div>
 <div v-else>default</div>

这样写在按钮样式少的时候完全没有问题,但是试想,如果需要的按钮样式有十多个,按钮内的文字根据实际情况而定(如success按钮内的文字可能是OK、GOOD等等)。那么template写死的方式就显得很无力了。遇上类似这样的情况,使用render函数可以说最优选择了。

根据实际情况改写按钮组件

首先render函数生成的内容相当于template的内容,故使用render函数时,在.vue文件中需要先把template标签去掉。只保留逻辑层。

export default {
 render(h) {
  return h('div',{
   'class': {
    btn: true,
    success: this.type === 'success',
    error: this.type === 'error',
    warm: this.type === 'warm',
    default: this.type === 'default'
   },
   domProps: {
    innerHTML: this.$slots.default[0].text
   },
   on: {
    click: this.clickHandle
   }
  })
 },
 methods: {
  clickHandle() {
   // dosomething
  }
 },
 props: {
  type: {
   type: String,
   default: 'default'
  },
  text: {
   type: String,
   default: 'default'
  }
 }
};

根据组件化思维,能抽象出来的东西绝不写死在逻辑上。这里的clickHandle函数可以根据按钮的type类型触发不同的逻辑,就不多叙述了。

然后在父组件调用

<btn
 v-for="(btn, index) in testData"
 :type="btn.type"
 :text="btn.text"
 :key="index">{{btn.text}}
</btn>

使用jsx

是的,要记住每个参数的类型同用法,按序传参实在是太麻烦了。那么其实可以用jsx来优化这个繁琐的过程。

return (
 <div
  class={{
   btn: true,
   success: this.type === 'success',
   error: this.type === 'error',
   warm: this.type === 'warm',
   default: this.type === 'default'
  }}
  onClick={this.clickHandle}>
  {this.$slots.default[0].text}
 </div>
)

示例二:

在遇到写类似的组件的时候需要写很多很长的代码,出于简洁(懒惰使人进步)的角度来说,我们应该找到更合适的方法来实现该效果。

<body> 
    <div id="app"> 
      <mycomment :level="2"> 
        这是h2元素 
      </mycomment> 
    </div> 
  </body> 
  <script type="text/x-template" id="is"> 
 <div> 
  <h1 v-if="level === 1"> 
   <slot></slot> 
  </h1> 
  <h2 v-if="level === 2"> 
    <slot></slot> 
  </h2> 
  <h3 v-if="level === 3"> 
   <slot></slot> 
  </h3> 
  <h4 v-if="level === 4"> 
   <slot></slot> 
  </h4> 
  <h5 v-if="level === 5"> 
   <slot></slot> 
  </h5> 
  <h6 v-if="level === 6"> 
   <slot></slot> 
  </h6> 
 </div> 
</script> 
  <script> 
    Vue.component('mycomment',{ 
      template:'#is', 
      props:{ 
        level:{ 
          type:Number, 
          required:true, 
        } 
      } 
    }) 
    var app =new Vue({ 
      el:'#app', 
    }) 
   </script>

这时候Render 函数就很好的解决了这个问题,先来简单一点额例子,算是有基本的骨架了

<body> 
  <div id="app"> 
    <render-teample :level="4"> 
      render function 
 
    </render-teample> 
  </div> 
 
</body> 
<script> 
Vue.component('render-teample',{ 
  render:function(createElement){ 
    return createElement( 
      'h'+this.level, 
      this.$slots.default 
      ) 
  }, 
   props: { 
  level: { 
   type: Number, 
   required: true 
  } 
} 
  var app=new Vue({ 
    el:"#app", 
 
  }); 
 </script>

然后进一步给你的组件加入你想要的样式需要事件,变得有血有肉

<body> 
    <div id="app"> 
      <render-teample :level="4" > 
 
        <div class="jah" slot="myslot">render function</div> 
      </render-teample> 
    </div> 
 
  </body> 
  <script> 
  Vue.component('render-teample',{ 
    render:function(createElement){ 
      return createElement( 
        'h'+this.level, 
        { 
          'class':{ 
            show:true, 
            hide:false, 
          }, 
          style:{ 
            width:'200px', 
            height:'400px', 
            background:'red', 
          }, 
          attrs:{ 
            name:'h-ex', 
            id:'h-id' 
          }, 
          props:{ 
            myprops:true, 
          }, 
           on: { 
          click: function(event){ 
            alert(this.num) 
          } 
        }, 
          nativeOn:{ 
            click:function(event) { 
 
              alert(1111) 
            } 
          } 
 
        }, 
        [ 
          this.$slots.myslot, 
          createElement('div',{ 
             domProps:{ 
            innerHTML:'holle render' 
          } 
          }) 
        ] 
 
        ) 
    }, 
     props: { 
    level: { 
     type: Number, 
     required: true 
    } 
  } 
});  
    var app=new Vue({ 
      el:"#app", 
      data:{ 
        num:110 
      } 
    }); 
  </script>

注意:约束组件中 VNodes 必须是唯一的。

直接把所有元素写在一个createElement()下是很痛苦的,不利于维护。

所以通常会

var com1= createElement('p','item1');var
com2= createElement('p','item1');

可以使用return createElement('div',[com1,com2])

这种情况是禁止的return createElement('div',[com1,com1])

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 #Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 #Javascript
微信小程序实现全国机场索引列表
Jan 31 #Javascript
微信小程序radio组件使用详解
Jan 31 #Javascript
微信小程序checkbox组件使用详解
Jan 31 #Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 #Javascript
浅析Angular19 自定义表单控件
Jan 31 #Javascript
You might like
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
JS高级笔记
2011/07/13 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
python的concat等多种用法详解
2018/11/28 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python conda操作方法
2019/09/11 Python
python中_del_还原数据的方法
2020/12/09 Python
Python datetime模块的使用示例
2021/02/02 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
财务与信息服务专业推荐信
2013/11/28 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
八月迷情观后感
2015/06/11 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python