1、官方文档地址:
https://cn.vuejs.org/v2/guide/render-function.html
2、简单理解
使用js生成需要的响应式的html代码
3、简单demo
header组件
引用:
输出:
解释:
网页出现的header标签就是header组件中,使用render函数的createElement方法创建的。
4、render函数中使用v-model
render组件
引用:
效果:
解释:
domProps指向的input标签,domProps.value指的就是输入框的值
on.input指的是输入框输入方法,输入时,通过change方法将输入的值抛出去
5、render函数中使用el-input组件
render组件
引用:
效果:
解释:
el-input的value是属性,不是内容,要将value放在attrs中
el-input的input方法,返回的是值,不是事件本身,所以不能用e.target.value
6、render函数中循环使用自定义组件
render组件
引用:
效果:
解释:
forms中,label是描述,el是要创建的标签,key对应form表单中的下标。
这样写的话,即使有很多个表单组件,也只用在forms中显示出来就好了。
render函数可以完成所有html的书写,不过为了方便不这么用。如果遇到类似这种代码相似度很高的,大量的标签,用render函数会非常有用。