我写了一个组件(组件 B),它像这样通过插槽接受自定义组件列表
// Component A
<div class="component-a">
...
<component-b>
<component-x></component-x>
<component-y></component-y>
</component-b>
...
</div>
我想将组件 x 和 y 包装在其他组件中,例如 li 标签。
// Output
...
<ul>
<li><component-x></component-x></li>
<li><component-y></component-y></li>
</ul>
...
我试过
// Component B
<div class="component-b">
<ul>
<li v-for="item in $slots.default">
<component :is="item"></component>
</li>
</ul>
</div>
这是行不通的。该项目是 VNode 对象,它不能用组件标签渲染。有什么办法可以解决这个问题吗?
编辑:我的包装组件不是 li 标签,它是一个自定义组件,具有我在组件 B 中设置的指定 Prop 。如果我从组件 A 包装它们,我需要重复编写自定义组件及其 Prop 。
Edit2:渲染功能也许可以解决这个问题,但我正在寻找带有 html 模板(单个文件组件)的解决方案。
最佳答案
我想如果没有成人版 ( render function ) 是不可能做到的。
PS:对于更详细的组件,不与渲染功能混淆,我建议插入另一个组件来处理其他功能,例如:
createElement(componentForMakeCoolThings,{props...})
PS2:您可以在单个文件组件中使用下面的解决方案,并进行简单的改编:
<script>
export default{
render: function(createElement){
}
}
</script>
Vue.component('makeLi',{
render:function(createElement){
var list = []
this.$slots.default.forEach((element,index) => {
if(element.tag){
list.push(createElement('li',{},[element]))
}
});
return createElement('ul',{},list)
}
})
new Vue({el:'#app'});
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<make-li>
<h1>test1</h1>
<b>bold</b>
<i>italic</i>
</make-li>
</div>
关于vue.js - 如何将每个元素包装在一个插槽中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44966767/