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中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
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
一个简易需要注册的留言版程序
2006/10/09 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
JS实现手风琴特效
2020/11/08 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python框架flask表单实现详解
2019/11/04 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python做接口测试的必要性
2019/11/20 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
情侣吵架检讨书
2014/02/05 职场文书
论文指导教师评语
2014/04/28 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
员工手册董事长致辞
2015/07/29 职场文书
浅谈Python 中的复数问题
2021/05/19 Python