这是最初看到render函数的样子,完全不明白这是怎么回事,于是乎各种查资料,
使用场景:web前端界面头布局中,可以重复使用 来接收每一个级别的标题标签,在标题标签中添加相同的锚点元素。但是些都会被包裹在一个无用的 div 中,因为组件必须有根节点。虽然模板在大多数组件中都非常好用,但是在这里它就不是很简洁的了。 render 函数就派上用场了
<script>
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 标签名称
this.$slots.default // 子组件中的阵列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
</script>
createElement 参数
如何在 createElement 函数中生成模板。这里是 createElement 接受的参数:
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签,组件设置,或一个函数
// 必须 Return 上述其中一个
'div',
// {Object}
// 一个对应属性的数据对象
// 您可以在 template 中使用.可选项.
{
// (下一章,将详细说明相关细节)
},
// {String | Array}
// 子节点(VNodes). 可选项.
[
createElement('h1', 'hello world'),
createElement(MyComponent, {
props: {
someProp: 'foo'
}
}),
'bar'
]
)
语法:
// `h` 作为 `createElement` 的别名是一个通用惯例
render:(h,params) => {
return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容])
}
示例:
render:(h,params)=>{
return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}