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 获取服务器控件值的代码
Mar 05 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
微信小程序实现的picker多级联动功能示例
May 23 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 已经成熟
2006/12/04 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
详解vue-router基本使用
2017/04/18 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Django与遗留的数据库整合的方法指南
2015/07/24 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python自定义线程池实现方法分析
2018/02/07 Python
QML使用Python的函数过程解析
2019/09/26 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
财务会计专业毕业生自荐信
2013/10/19 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技