基础
vue推荐在绝大多数情况下使用template来创建你的html。然而在一些场景中,你真的需要javascript的完全编程能力。这就是render函数。它比template更接近编译器
当我们开始写一个通过level prop动态生成heading标签的组件,你可能很快这样实现:
anchored-heading
中的hello world!这些子元素被存储在组件实例中的
$slots.default
中。如果你还不了解,在深入render函数前,需要了解实例的API.
{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器基于 `on`
// 所以不再支持如 `v-on:keyup.enter` 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件,用于监听原生事件,而不是组件内部使用 `vm.$emit` 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令. 注意事项:不能对绑定的旧值设值
// Vue 会为您持续追踪
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件,需为 slot 指定名称
slot:
'name-of-slot',
// 其他特殊顶层属性
key:
'myKey',
ref: 'myRef'
}
|
约束
VNodes必须唯一
组件树中的所有VNodes必须是唯一的。这意味着下面的render函数是无效的
render:function(creatElement){
var myParagraphVNode = createElement('p', 'hi');
}
如果你真的需要重复很多次的元素/组件,你可以使用工厂函数来实现,例如,下面这个例子中render函数完美有效的渲染了20个重复的段落:
render:function(createElement){
return createElement('div',Array.apply(null,{length:20}).map(function(){
return createElement('p','hi');
}))
}
使用javascript代替模板功能
v-if and v-for
由于使用原生的javascript来实现某些东西很简单,vue的render函数没有提供专用的API,比如:template中的v-if 和v-for.
Modifier(s) | Prefix |
---|---|
.passive | & |
.capture | ! |
.once | ~ |
.capture.once or.once.capture | ~! |
Modifier(s) | Equivalent in Handler |
---|---|
.stop | event.stopPropagation() |
.prevent | event.preventDefault() |
.self | if (event.target !== event.currentTarget) return |
Keys:.enter , .13 | if (event.keyCode !== 13) return (change 13 to another key code for other key modifiers) |
Modifiers Keys:.ctrl , .alt , .shift , .meta | if (!event.ctrlKey) return (change ctrlKey to altKey , shiftKey , or metaKey , respectively) |
下面是使用了所有修饰符的例子:
on:{
keyup:function(event){
//如果触发事件的元素不是事件绑定的元素
//则返回
if(event.target !== event.currentTarget)return
if(!event.shiftKey || event.keyCode !== 13)return
}
}
slots
你可以从this.$slots获取VNode列表中的静态内容。
render:function(createElement){
createElement('div',this.$slots.default)
}
还可以从this.$scopedSlots中获得能用作函数的作用域插槽,这个函数返回VNodes:
render:function(createElement){
return createElement('div',[this.$scopedSlots.default({text:this.msg})])
}
如果要用render函数向子组件中传递作用域插槽,可以利用VNode数据中的scopedSlots域:
render:function(createElement){
return createElement('div',[
createElement('child',{
scopedSlots:{
default:function(props){
return createElement('span',props.text)
}
}
})
])
}
jsx
如果你写了很多render函数,可能会觉得痛苦:
h
作为
createElement
的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中
h
失去作用, 在应用中会触发报错。
- props:提供props的对象,
- children:VNode子节点的数组
- slots:slots对象
- data:传递给组件的data对象
- parent:对父组件的引用
- listeners:(2.3.0+)一个包含了组件上所注册的v-on侦听器的对象,这只是一个指向data.on的别名
- injections:(2.3.0+)如果使用了inject选项,则该对象包含了应当被注入的属性
在添加functional:true之后,锚点标题组件的render函数之间,简单更新增加context参数。