Render是使用js的完全编程能力来渲染页面,即用js来构建DOM.
说明:render是一个方法,自带一个形参createElement(还有context..),这个参数也是一个方法,是用来创建虚拟dom节点的,也就是html模板的,然后渲染(render)到指定的节点上。render函数的目的是创建虚拟dom节点。因为createElement是个形参,所以这个形参可以用任何字符替换,比如h
- createElement/h:
createElement接收3个参数:
第一个参数可以是HTML标签名,组件或者函数都可以;此参数是必须的;
第二个为数据对象,虚拟dom的配置(可选);
第三个为子节点,支持字符串与数组(多层嵌套h())(可选)。
vue2.0里面的写法
render: h => h(App)
等价于
render:function(h,context){
return h(App);
}
也等价于
render:function(createElement,context){
return createElement(App)
}
假设我们要生成一些带锚点的标题:子组件想要根据父组件传递的 level
值(1-6)来决定渲染标签 h 几
。
<h1>
<a name="hello-world" href="#hello-world">
Hello world!
</a>
</h1>
<anchored-heading :level="1">Hello world!</anchored-heading>
当开始写一个只能通过 level
prop 动态生成标题 (heading) 的组件时,你可能很快想到这样实现:
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
对于上面的 HTML,这样定义组件接口实现:
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了 <slot></slot>
,在要插入锚点元素时还要再次重复。
虽然模板在大多数组件中都非常好用,但是显然在这里它就不合适了。那么,我们来尝试使用 render
函数重写上面的例子:
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
在这个例子中,你需要知道,向组件中传递不带
v-slot
指令的子节点时,比如anchored-heading
中的Hello world!
,这些子节点被存储在组件实例中的$slots.default
你可以通过 this.$slots
访问静态插槽的内容,每个插槽都是一个 VNode 数组
render: function (createElement) {
// `<div><slot></slot></div>`
return createElement('div', this.$slots.default)
}
也可以通过 this.$scopedSlots
访问作用域插槽,每个作用域插槽都是一个返回若干 VNode 的函数
props: ['message'],
render: function (createElement) {
// `<div><slot :text="message"></slot></div>`
return createElement('div', [
this.$scopedSlots.default({
text: this.message
})
])
}
ps:
render函数return什么该组件就渲染什么
以render函数渲染时,内部最好不要出现注释
总结:
1. render方法的实质就是生成template模板;
2. 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给它的;
3. 这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容
4. 通过这三个参数,可以生成一个完整的木模板
备注:
- render方法可以使用JSX语法,但需要Babel plugin插件;
- render方法里的第三个参数可以使用函数来生成多个组件(特别是如果他们相同的话),只要生成结果是一个数组,且数组元素都是VNode即可;
注意:
render函数是有限制的,Vue.js 2.X支持,但是1.X无法使用。