use the rendering function of Vue to render html elements. The parent node can render it, but the child node can not.
:
<script>
export default {
props: {
renderConfig: {
type: Object,
required: true
}
},
data() {
return {}
},
render(h) {
let ele = this.renderElements(h, this.renderConfig)
console.log(ele)
return ele
},
methods: {
renderElements(h, renderConfig) {
if (!h || !renderConfig) {
return
}
if (renderConfig.children && renderConfig.children.length) {
let children = []
for (let element of renderConfig.children) {
// rendervnode
children.push(this.renderElements(h, element))
}
console.log(children)
return h(
renderConfig.tag,
{ ...Object.assign(renderConfig.properties) },
children
)
}
return h(renderConfig.tag, { ...Object.assign(renderConfig.properties) })
}
}
}
</script> props:
{
tag: "div",
properties: {
attrs: { id: "myDiv", "data-url": "www.abc123.com" },
domProps: { innerHTML: "Hello, myDiv" },
on: {
click: this.handleClick
}
},
children: [
{
tag: "label",
properties: {
attrs: { id: "myLabel" },
domProps: { innerHTML: ": " }
}
},
{
tag: "input",
properties: {
attrs: { id: "myInput", value: "hello~~" }
},
on: { change: this.handleChange }
}
]
} log result of ele:
vnodelog:
DOM:
you can see that the child element (vnode) has a value in renderElements (), but it disappears after render (h). What went wrong?
I have been watching it for a long time, but I really can"t see it.