项目在做底代码开发,想通过后端返回的json生成app页面, 小白才接触uniapp 想通过 渲染函数 h() 来动态生成组件,
现在生成原生组件时没问题,但是想动态生成第三方的组件,uni-ui的组件 就生成不了 想请大神指点一二
附上代码
<script>
import { h, resolveComponent } from 'vue';
export default {
data() {
return {
title: 'Hello',
myform: null,
}
},
onLoad() {
console.log('index.vue onLoad....');
let formJson = {"type":"view","props":{ "key":"myview" },"children":[{type:"uni-calendar", props:{"insert": true, "lunar": true, "start-date":"2019-3-2", "end-date":"2019-5-20"}, children:[]},"heiheihei",{"type":'navigator', "props":{ url:"/pages/datepicker/datepicker" }, children:'跳转页面'},{"type":"input","props":{"name":"input_123","size":"mini","placeholder":"请输入内容"},"children":[]},{"type":"button","props":{"name":"button_123","size":"mini","type":"primary"},"children":"按钮"},{"type":"button","props":{"name":"button_222","size":"mini","type":"warn", "onClick": $event => console.log('clicked', $event.target)},"children":"按钮2"}]};
this.myform = this.createVNodeByJson(formJson);
// console.log('myform', this.myform);
// this.myform = h(resolveComponent('uni-calendar'));
// console.log('this.myform', this.myform)
},
onShow(){
console.log('on index show!')
},
methods: {
createVNodeByJson(FormJson){
let _json = typeof FormJson === "string" ? JSON.parse(FormJson) : FormJson;
return h(_json.type, _json.props || null, Array.isArray(_json.children) ? _json.children.map(child => {
return this.childrenBuilder(child);
}) : this.childrenBuilder(_json.children));
},
childrenBuilder( child ){
return typeof child == "string" ? child : this.createVNodeByJson(child)
}
},
render(){
return this.myform;
}
}
</script>
2 个回复
5***@qq.com
请问张大哥问题你解决了吗 楼主
CODE_XU
渲染函数 h() 只能用于 h5