我有一个菜单组件，简单地说，它接收一个带有一系列选项的props ，并 for each 选项呈现菜单中的一个项目.我希望能够根据用例定制每个菜单项中的标记，所以我在菜单项元素中使用了占位符.
你可以在这fiddle本书中看到一个例子.
const Menu = {
template: `
<ul>
<li v-for="item in options" :class="item.colour">
<slot></slot>
<span class="label">{{item.name}}</span>
</li>
</ul>
`,
data: () => {
return {
options: [
{ name: 'one', colour: 'red' },
{ name: 'two', colour: 'green' },
{ name: 'three', colour: 'blue' },
{ name: 'four', colour: 'yellow' }
]
};
}
};
const app = new Vue({
components: {
custommenu: Menu,
},
template: `<custommenu><span class="colour"></span></custommenu>`
});
app.$mount('#app');
这在Vue的v1上运行良好.但是升级到v2后，我看到在同一渲染树中发现了错误"重复存在插槽"默认值-这可能会导致渲染错误
这在v2中是可能的，还是有其他方法可以实现同样的目标？