Vue中render方法的使用详解


Posted in Javascript onJanuary 26, 2018

先说一下对官网上demo的个人理解:

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法说明</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child :level="1">
    hello world
  </child>
</div>

<script type="text/x-template" id="anchored-heading-template">
  <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 type="text/javascript">
Vue.component('child', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
});
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

虽然使用template定义组件的方法非常的直观,但是这样会造成代码过长。可以使用render的方法

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法说明</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child :level="1">
    hello world
  </child>
</div>
<script type="text/javascript">
Vue.component('child', {
  render:function (createElement) {
    var body=this.$slots.default;
    //this.$slots返回了一个组件分发下来的元素和内容
    //this.$slots.default返回了具名的内容
    return createElement(
      'h'+this.level,
      //this.level是利用v-bind注入到组件中的level
      body
    )
  },
  //因为vue中组件父组件无法向子组件注入内容。所以我们需要通过
  //v-bind定义一个key,value向子组件注入内容。所要接收的值也需要在定义组件时的props属性中的定义一下
  props:{
    level:{

    }
  }
});
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

下面是一个slot具名分发的demo:介绍了creatElement的用法:

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法说明</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child>
    <p slot="header">this is header</p>
    <p slot="center">this is center</p>
    <p slot="footer">this is footer</p>
  </child>
</div>


<script type="text/javascript">
  Vue.component('child', {
    render: function (createElement) {
     var header=this.$slots.header;
     var center=this.$slots.center;
     var footer=this.$slots.footer;
//createElement第一个参数是标签名,第二个参数是值
     return createElement('div',[
       createElement('div', header),
       createElement('div', center),
       createElement('div', footer),
     ])
    }
  });
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

所创建的组件的demo结果如下:

Vue中render方法的使用详解

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

Javascript 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
Paypal支付不完全指北
Jun 04 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
Angular利用trackBy提升性能的方法
Jan 26 #Javascript
微信小程序版翻牌小游戏
Jan 26 #Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 #Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 #Javascript
微信小程序实现animation动画
Jan 26 #Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 #Javascript
微信小程序如何获取openid及用户信息
Jan 26 #Javascript
You might like
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python实现的堆排序算法示例
2018/04/29 Python
python取余运算符知识点详解
2019/06/27 Python
python实现中文文本分句的例子
2019/07/15 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
专业销售业务员求职信
2013/11/18 职场文书
对祖国的寄语大全
2014/04/11 职场文书
工作会议方案
2014/05/21 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL