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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python实现批量下载文件
2015/05/17 Python
python web框架学习笔记
2016/05/03 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
自荐信结尾
2013/10/27 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
学生逃课检讨书
2015/02/17 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
讲解Python实例练习逆序输出字符串
2022/05/06 Python
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers