Question

我是Vue.js世界的新手，我必须构建一个递归组件渲染器，以将JSON转换为渲染的Vue组件。

到目前为止，递归渲染工作正常，除了我传递给createElement函数的道具（下面的代码;））不能作为道具使用，而是在$ vnode.data对象内部。有什么想法我想念的吗？

我正在使用的模拟JSON如下：

{
  "_id": "aslwi2",
  "template": "NavigationBar",
  "data": {},
  "substructure": [
    {
      "_id": "assd2",
      "template": "NavigationBarListItem",
      "data": {
        "title": "NavList Item 1"
      }
    },
    {
      "_id": "a2323uk",
      "template": "NavigationBarListItem",
      "data": {
        "title": "NavList Item 2"
      }
    }
  ]
}

我的递归渲染组件：

const createComponent = function(node ,h){
    if(!node || !node.template){
        return;
    }

    let children = [];
    if(node.substructure instanceof Array){
        node.substructure.map( async childNode => {
            const childComponent = createComponent(childNode, h);
            children.push(childComponent);
        });
    }

    return h(node.template, {xdata : clone(node.data)}, children.length > 0 ? children : null );
};



export default Vue.component('Structure', {
    render: function(createElement){

        if(!this.structure) return;
        const component =  createComponent(this.structure, createElement, registry);
        console.log(component);
        return component;
    },
    props: {
        structure: {
            type: Object
        }
    }
})

以及我动态实例化的组件：

<!-- Component: NavBar -->
<template>
    <div class="nav-bar">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        props: {
            data: {
                type: Object
            }
        }
    }
</script>

<!-- Component: NavBarListItem -->
<template>
    <div class="nav-bar-item">
        {{title}}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                title : "default"
            }
        },
        created() {
            console.log('list item: ', this)
        }
    }
</script>

在列表项组件中创建方法的日志中，我们在$ vnode中找到传递的道具...

Answer 1

问题在这里：

return h(node.template, {xdata : clone(node.data)}, ...

我不知道xdata是什么，但这不是您应该传递给h的东西。这些选项记录在https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth中。

要传递道具，您可以使用props。

return h(node.template, {props : clone(node.data)}, ...

尽管我在努力遵循代码背后的意图，但是看起来NavBarListItem可能还存在着未定义title道具的问题。除非将title定义为道具，否则您不能传递它。在data中定义它不是一回事。

Vue组件道具仅在$ vnode

1 个答案: