浅析Vue 中的 render 函数(2)

render(h) { return h('div', { attrs: { // <div :id="myCustomId"> id: this.myCustomId }, props: { // <div :someProp="someonePutSomethingHere"> someProp: this.someonePutSomethingHere }, domProps: { // <div :value="somethingElse"> value: this.somethingElse } }); }

需要注意的是，对于 class 和 style 的绑定是直接在定义的根进行处理，而不是作为 attrs ， props 或 domProps 处理。

render(h) { return h('div', { // “类”是JS中的保留关键字，因此必须引用它。 'class': { myClass: true, theirClass: false }, style: { backgroundColor: 'green' } }); }

v-on

对事件处理程也是直接添加到元素定义中 on 定义

render(h) { return h('div', { on: { click(e) { console.log('I got clickeded!') } } }); }

事件的修饰符可以在处理程序内部实现：

.stop -> e.stopPropagation()
.prevent -> e.preventDefault()
.self -> if (e.target !== e.currentTarget) return

键盘修饰符

.[TARGET_KEY_CODE] -> if (event.keyCode !== TARGET_KEY_CODE) return
.[MODIFIER] -> if (!event.MODIFIERKey) return

特殊属性

Slots 可以通过 this.$slots 作为 createElement（） 节点的数组来访问插槽。

作用域插槽存储在 this.$scopedSlots[scope](props：object) 中，作为返回 createElement() 节点数组的函数。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 。

总结

到此这篇关于浅析Vue 中的 render 函数的文章就介绍到这了,更多相关Vue render 函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章: