Vue.js render方法使用详解


Posted in Javascript onApril 05, 2017

前注:

版本限制:

Vue.js 2.0+
1.0无法使用

没耐心,只关心有什么用的,想知道其大概是获取什么东西后生成的,可以直接看结尾的总结

非使用render方法的情况

完整代码:

<!DOCTYPE html>
<html>
<head>
<title>Vue的render方法说明</title>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child :level="1">Hello world!</child>
</div>
<script type="text/x-template" id="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: '#template',
props: {
level: {
type: Number,
required: true
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>

代码说明:

  • 最下面的new Vue方法很明显,是new了一个Vue的实例,挂载点是”#app”这个dom
  • Vue.component这部分代码,第一个参数表示注册了一个Vue的组件,标签名是child(即 <child> 标签会被替换);
  • 第二个参数中,template属性表示取找id=“template”的标签(另注,这个标签是script,或者是div,或者是template,或者是其他,没有影响),然后将这个标签作为组件的模板
  • props表示传递给这个组件的变量,通过标签中的v-bind:level这种形式传递变量level的值等于1。在这里的写法是限制变量类型为number,并且强制需要
  • slot表示内容分发,具体来说,就是把组件替换的源html标签里的内容(如 <child> 标签里面的内容,不包含 <child> 标签本身,这里是Hello world!),发在 <slot> 标签所在的位置(即放在 <h1>``````<h2> 这样的标签内)。
  • 如果还不理解,可以运行该段代码查看结果,或者去看vue的官方文档说明
  • 总的来说,顺序如下:注册一个组件,这个组件有模板,这个模板里有一个变量,变量的值通过父组件来传递,然后根据变量的值,通过v-if命令显示对应的html标签内容,然后在父组件里使用这个组件,让子组件显示需要显示的内容。

这样的代码有一个缺陷,就是需要写大量重复的代码,如从 <h1> ~ <h6> 共6种情况。如果这样的模板比较复杂,比如 <hx> 标签里还有很多其他内容,显然会让人十分困扰,既不美观也不好用。

使用render方法的情况

解决办法就是render方法,全部代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Vue的render方法说明</title>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child v-bind:level="2">Hello world!</child>
</div>
<script type="text/javascript">
Vue.component('child', {
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>

代码说明:

1、这里的代码和上面区别之处有两点:

其一,没有显式的模板内容,而是通过render方法生成;
其二,使用了createElement方法

2、关于createElement方法,他是通过render函数的参数传递进来的,这个方法有三个参数,

第一个参数主要用于提供dom的html内容,类型可以是字符串、对象或函数。比如”div”就是创建一个 <div>标签

第二个参数(类型是对象)主要用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件之类,具体可以参考 官方文档 里这一小节的说明

第三个参数(类型是数组,数组元素类型是VNode)主要用于说是该结点下有其他结点的话,就放在这里。

比如说,有需要分发的标签 <slot>,则通过 this.$slots.default 来获得,或许还有其他组件之类,可能需要被使用的,应该也是放在这里。

个人初步理解是,在原本被替换的地方,例如例上面代码中的 <child> 标签,在其下的每个次一级标签为一个元素,放在 this.$slots.default这个数组中,例如上面的话,这个数组只有一个元素,但是以下代码:

<child v-bind:level="2"><div>Hello</div><div> world!</div></child>

这个数组中则有两个元素,分别是 <div>Hello</div> 和 <div> world!</div>,例如 this.$slots.default[0] 则表示第一个标签。

另外,假如这2个元素中间有空格、换行符之类,那么数组中则有三个元素,那个空格、换行符则为第二个元素。这个属性有点类似dom的 childNodes属性,不是单纯以标签才算作子节点的。(但注意,不是完全相同)

有时候,我们可能想在里面添加其他的组件,例如将abc组件注册在里面。那么,我们首先要注册这个abc组件,然后将abc组件在数组里通过createElement来创建标签,只有通过这样的方式创建的abc标签,才能被abc组件使用。单纯输入字符串 "<abc></abc>" 这样是不可以的。

如以下代码是可行的:(在通过render方法生成的模板中添加别的组件)

<!DOCTYPE html>
<html>
<head>
<title>Vue的render方法说明</title>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child v-bind:level="2">
<div>Hello</div><div> world!</div>
</child>
</div>
<script>
Vue.component('abc', {
template: "<div>abc</div>"
})

Vue.component('child', {
render: function (createElement) {
console.log(this.$slots)
return createElement(
'h' + this.level, // tag name 标签名称
[this.$slots.default[0], createElement("abc"), this.$slots.default[1]] // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})

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

显示结果是:

Hello
abc
world!

最后,如果想将原有内容全部使用(而不是只取部分标签),那么直接使用 this.$slots.default 作为第三个参数即可,他本身就是一个数组。

3、总而言之,createElement方法的作用就是动态的创建一个dom用于被render函数渲染,其中参数二和参数三可以选择性省略,参数二用于设置dom的样式、属性、事件等,参数三用于设置分发的内容,包括新增的其他组件。

粗略理解的话,可以理解为:createElement( 标签名, 标签属性, 标签里的内容)

这样的话,我们就有了一个组件的模板所需要的全部内容了

总结

1、render方法的实质就是生成template模板;

2、通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的;

3、这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容

4、通过这三个参数,可以生活曾一个完整的模板。

备注:

1、render方法可以使用JSX语法,但需要Babel plugin插件;

2、render方法里的第三个参数可以使用函数来生成多个组件(特别是如果他们相同的话),只要生成结果是一个数组,且数组元素都是VNode即可

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

Javascript 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
使用jQuery实现购物车
Oct 29 jQuery
self.attachevent is not a function的解决方法
Apr 04 #Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 #Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 #Javascript
Vue.js实战之组件的进阶
Apr 04 #Javascript
关于axios返回空对象的问题解决
Apr 04 #Javascript
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
You might like
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
python处理二进制数据的方法
2015/06/03 Python
python正则表达式之作业计算器
2016/03/18 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python Tkinter的图片刷新实例
2019/06/14 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
青年志愿者活动方案
2014/08/17 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
政府四风问题整改措施
2014/10/04 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
义诊活动通知
2015/04/24 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang