我无法弄清楚如何让以下内容发挥作用：
我的家长模板
<comp>
<a href="#" slot="links">link 1</a>
<a href="#" slot="links">link 2</a>
</comp>
和我的组件comp模板如下所示：
<ul class="comp">
<li class="comp-item"><slot name="links"></slot></li>
</ul>
目前我所有的主播都指向那首单曲li标签（这是预期的）
但我希望能够生产多个li对于我插入的每个命名插槽，如下所示：
<ul class="comp">
<li class="comp-item"><a href="#" slot="links">link 1</a></li>
<li class="comp-item"><a href="#" slot="links">link 2</a></li>
</ul>
有没有什么方法可以在不使用作用域插槽的情况下实现我所需要的？因为我的内容是纯 HTML，所以我觉得没有必要将静态内容放入 prop 中来渲染它们。
据我所知，大多数 vue UI 框架都要求您为列表项使用另一个自定义组件，我觉得这个问题已经过时了。还有其他方法可以做到这一点吗？
这可以通过渲染函数轻松完成。
Vue.component("comp", {
render(h){
let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
return h('ul', {class: 'comp'}, links)
}
})
这是一个工作示例。
console.clear()
Vue.component("comp", {
render(h){
let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
return h('ul', {class: 'comp'}, links)
}
})
new Vue({
el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<comp>
<a href="#" slot="links">link 1</a>
<a href="#" slot="links">link 2</a>
</comp>
</div>
或者借助用于渲染 vNode 的小型实用程序组件，您可以使用模板来完成此操作。
Vue.component("vnode", {
functional: true,
render(h, context){
return context.props.node
}
})
Vue.component("comp", {
template: `
<ul class="comp">
<li class="comp-item" v-for="link in $slots.links"><vnode :node="link" /></li>
</ul>
`
})
new Vue({
el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<comp>
<a href="#" slot="links">link 1</a>
<a href="#" slot="links">link 2</a>
</comp>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
