如何使用 Vue 命名插槽呈现静态内容列表?
我无法弄清楚如何让以下工作:
I have trouble figuring out how to get the following to work:
我的父模板
<comp>
<a href="#" slot="links">link 1</a>
<a href="#" slot="links">link 2</a>
</comp>
我的组件 comp 模板如下所示:
and my component comp template looks like the following:
<ul class="comp">
<li class="comp-item"><slot name="links"></slot></li>
</ul>
目前我所有的锚点都指向那个单一的 li 标签(这是预期的)但我希望能够为我插入的每个命名插槽生成多个 li，如下所示:
currently all my anchors goes to that single li tag (which is expected)
but I would like to be able to produce multiple li for every named slot I inserted like the following:
<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 中以呈现它们.
Is there any way to achieve what I need without using scoped slot? Because my content is pure HTML so I feel it is unnecessary to put static content inside prop in order to render them.
据我所见，大多数 vue UI 框架都要求您为列表项使用另一个自定义组件，我觉得这个问题已经过时了.有没有其他方法可以做到这一点?
From what I have seen, most vue UI framework requires you to use another custom component for the list item, which I feel is over killed for the problem. Is there any other way to do this?
推荐答案
这很容易通过渲染函数完成.
This is easily accomplished with a render function.
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 的小型实用程序组件，您可以使用模板来执行此操作.
Or with the help of a small utility component for rendering vNodes you could do it like this with a template.
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>相关文章