在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。
createElement
函数中生成模板。这里是 createElement
接受的参数:
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串,组件选项对象,或者一个返回值
// 类型为 String/Object 的函数,必要参数
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样,您可以在 template 中使用这些属性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子节点 (VNodes),由 `createElement()` 构建而成,
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
1)render 函数中没有与 v-model
相应的 api - 你必须自己来实现相应的逻辑:
<div id="app">
{{name}}
<my-input v-model="name" :value="name"></my-input> <!--此处value绑定name页面一开始就会有默认值-->
</div>
<script>
Vue.component('my-input',{
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.$emit('input', event.target.value)
}
}
})
}
})
let vm=new Vue({
el:'#app',
data:{
name:'zx'
}
})
</script>
实例创建一个input组件进行value值的绑定更改。
2)