Javascript 如何解决-插槽重复出现”；“违约”；在同一渲染树中找到

我在多次使用

时遇到以下错误：

在同一渲染树中发现插槽“default”重复存在- 这可能会导致渲染错误

有一些解决方案使用“作用域插槽”，但我的理解是，最好使用

v-for

。我不确定，我可能错了，如果我错了，请告诉我

在这种情况下，我需要在子组件中多次复制静态内容（带有标记）

父组件：

Lorem Ipusm
雅虎！

子组件：

这里需要一个默认插槽
这里还需要一个默认插槽吗

如果上述问题无法解决，或者是Vue.js的限制，请告诉我如何克隆插槽（或类似的东西）并使其保持反应状态。

Use应该能够实现您需要的功能，如以下演示：

但您可能会遇到一些问题，如以下链接所述：

正如Vue.js核心团队的开发人员所说：

Vue将重用相同的vnode对象（表示元素） 在实际创建DOM元素的过程中多次

问题是，每个vnode都会获得对其 对应的DOM元素集

如果多次重复使用相同的vnode对象，这些引用 如果被覆盖，则最终会得到没有 虚拟dom或VNode中引用错误 元素

因此，在下面的演示中，当您单击该按钮时，您将发现第一个案例的第一个插槽未同步（VNode被覆盖）

如果默认插槽是完全静态的内容，则不会绑定到任何属性和方法，则可以在render（）中使用多个默认插槽。但如果没有，则必须使用作用域插槽来实现所需的功能

或者您可以深度克隆

此.slots.default

（选中），它将避免覆盖问题。（检查下面演示中的第三个案例）

Vue.config.productionTip=false
Vue.component（'子'{
渲染：函数（createElement）{
返回createElement(
"div",，
[
这是。$slots.default，//默认插槽
createElement（'div'{
属性：{
名称：“测试”
},
样式：{fontSize:'10px'，'color'：'green'}
}，this.$slots.default）//默认插槽
]
)
}
})
函数deepClone（vnodes，createElement）{
让clonedProperties=['text'、'isComment'、'componentOptions'、'elm'、'context'、'ns'、'isStatic'、'key']
函数cloneVNode（vnode）{
让clonedChildren=vnode.children&&vnode.children.map（cloneVNode）
让cloned=createElement（vnode.tag、vnode.data、clonedChildren）
clonedProperties.forEach（函数（项）{
克隆的[item]=vnode[item]
})
返回克隆
}
返回vnodes.map（cloneVNode）
}
Vue.component（'child2'{
渲染：函数（createElement）{
返回createElement(
"div",，
[
这是。$slots.default，//默认插槽
createElement（'div'{
属性：{
名称：“测试”
},
样式：{fontSize:'10px'，'color'：'green'}
}，deepClone（this.$slots.default，createElement））//默认插槽
]
)
}
})
Vue.component（'child1'{
渲染：函数（createElement）{
返回createElement(
"div",，
[
这是。$slots.default，//默认插槽
createElement（'div'{
属性：{
名称：“测试”
},
样式：{fontSize:'10px'，'color'：'green'}
}，this.$slots.my）//默认插槽
]
)
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
测试：{
“项目”：“测试”，
“prop1”：“a”
}
}
},
方法：{
changeData:function（）{
此.test.item='none'
}
}
})

点击我！！！
使用多个默认插槽：
{{test}}
改为使用作用域插槽：
{{test}}{{test}
改为使用深度克隆（默认）：
{{test}}{{test}

Use应该能够实现您需要的功能，如以下演示：

但您可能会遇到一些问题，如以下链接所述：

正如Vue.js核心团队的开发人员所说：

Vue将重用相同的vnode对象（表示元素） 在实际创建DOM元素的过程中多次

问题是，每个vnode都会获得对其 对应的DOM元素集

如果多次重复使用相同的vnode对象，这些引用 如果被覆盖，则最终会得到没有 虚拟dom或VNode中引用错误 元素

因此，在下面的演示中，当您单击该按钮时，您将发现第一个案例的第一个插槽未同步（VNode被覆盖）

如果默认插槽是完全静态的内容，则不会绑定到任何属性和方法，则可以在render（）中使用多个默认插槽。但如果没有，则必须使用作用域插槽来实现所需的功能

或者您可以深度克隆

此.slots.default

（选中），它将避免覆盖问题。（检查下面演示中的第三个案例）

Vue.config.productionTip=false
Vue.component（'子'{
渲染：函数（createElement）{
返回createElement(
"div",，
[
这是。$slots.default，//默认插槽
createElement（'div'{
属性：{
名称：“测试”
},
样式：{fontSize:'10px'，'color'：'green'}
}，this.$slots.default）//默认插槽
]
)
}
})
函数deepClone（vnodes，createElement）{
让clonedProperties=['text'、'isComment'、'componentOptions'、'elm'、'context'、'ns'、'isStatic'、'key']
函数cloneVNode（vnode）{
让clonedChildren=vnode.children&&vnode.children.map（cloneVNode）