我有一个接收项目列表的组件。这些项目中的每一项都将是主组件内的子组件。每个子组件都有一个插槽,我需要在其中分发内容。
如何将每个项目的内容(名称)分发到正确的插槽?
根应用程序:
<div id="app">
<test-list :items="items"></test-list>
</div>
var app = new Vue({
el: "#app",
data: {
items: [
{id: 1, name: "item 1"},
{id: 2, name: "item 2"},
{id: 3, name: "item 3"},
{id: 4, name: "item 4"},
{id: 5, name: "item 5"},
]
}
});
主要成分:
Vue.component('test-list', {
template: '#test-list',
props: {
items: []
},
});
<script id='test-list' type='x-template'>
<ul class="list-group">
<test-item v-for="item in items" :id="item.id" :name="item.name"></test-item>
</ul>
</script>
子组件:
Vue.component('test-item', {
template: '#test-item',
props: {
id: 0,
name: ""
}
});
<script id='test-item' type='x-template'>
<li class="list-group-item">
<slot>default text {{name}}</slot>
</li>
</script>
我能做的最好的事情就是在所有项目上分发相同的内容:JSFiddle here
有什么想法吗?谢谢!
最佳答案
如果我没猜错的话,this就是你想要的。您必须使用named slots ,这样:
根应用程序
<test-list :items="items">
</test-list>
主要组件
<ul class="list-group">
<test-item v-for="item in items" :id="item.id" :name="item.name">
<span :slot="item.name"></span>
</test-item>
</ul>
子组件
<li class="list-group-item">
<slot :name="name">default text {{name}}</slot>
</li>
注意事项:
slot
组件包含在子组件中,并带有 name 属性- 要放入槽中的元素通过
slot
属性放置在父元素中。 - 两个属性都有一个
v-on
指令(我使用了:
简写),因此您可以绑定(bind) Vue 实例的内容
希望有帮助。
关于javascript - 如何在子列表的插槽内分配组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37815925/