关于Vue中的深度复制slot的问题？

最近在看《Vue.js》实战这本书，遇到了一段关于深度复制slot的代码，按照书敲了一遍，报错。然后反复检查和上网查了资料，还是不知道错在哪？希望哪位大神能帮忙看看。

感谢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <ele>
                <div>
                    <Child></Child>
                </div>
            </ele>
        </div>
        <script>
        
        Vue.component('Child',{
            render:function(createElement){
            return createElement('p','text');
            }
        });
        Vue.component('ele',{
            render:function(createElement){
                //克隆slot节点的方法
                function cloneVNode(vnode){
                    //递归遍历所有子节点，并克隆
                    const clonedChildren = vnode.children && vnode.children.map(function(vnode){
                        return cloneVNode(vnode);
                    });
                    const cloned = createElement(
                        vnode.tag,
                        vnode.data,
                        clonedChildren
                    );
                    cloned.text = vnode.text;
                    cloned.isComment = vnode.isComment;
                    cloned.componentOptions = vnode.ComponentOptions;
                    cloned.elm = vnode.elm;
                    cloned.context = vnode.context;
                    cloned.ns = vnode.ns;
                    cloned.isStatic = vnode.isStatic;
                    cloned.key = vnode.key;
                    return cloned;
                }
                const vNodes = this.$slots.default;
                const clonedVNodes = vNodes.map(function(vnode){
                    return cloneVNode(vnode);
                });
                
                return createElement('div',[
                    vNodes,
                    clonedVNodes
                ]);
            }
        });
        var app = new Vue({
            el:'#app'
        })
        
        </script>
    </body>
</html>

Neilro3534034

浏览 1590回答 1

1回答

Neilro3534034

有人吗

0 0

随时随地看视频慕课网APP