父组件
ul-test.vue
<template>
<div>
<ul-render-test :ulOptions="ulOptions"></ul-render-test>
</div>
</template>
<script>
import ulRenderTest from './ul-render-test.vue'
export default {
components: { ulRenderTest },
data () {
return {
ulOptions: [{
tag: 'ul',
id: 1,
children: [
{
tag: 'ul',
id: 2,
children: [{
tag: 'li',
id: 3,
text: 'item1'
},
{
tag: 'li',
id: 4,
text: 'item2'
}
]
}
]
}]
}
}
}
</script>
子组件（render渲染）
ul-render-test.vue
<script>
export default {
props: {
ulOptions: {
type: Array,
default: function () {
return []
}
}
},
methods: {
createTag (h, data1) {
return data1.map((node) => {
return h(node.tag, [(node.children ? this.createTag(h, node.children) : node.text)])
})
}
},
render: function (h) {
return this.createTag(h, this.ulOptions)
}
}
</script>
页面渲染结果：
