Hinzufügen von <slot> im wiederholenden Inhalt Bereich

Question

Ich habe eine Menü-Komponente, die vereinfacht, eine Requisite mit einem Array von Optionen und rendert ein Element im Menü für jedes. Ich wollte in der Lage sein, das Markup, das in jedem der Menüelemente war, abhängig von dem Anwendungsfall anzupassen, so dass ich den Platzhalter innerhalb des Menüelementelements verwendete.

Sie können ein Beispiel dafür in diesem fiddle sehen.

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'); 

Das funktionierte auf v1 von Vue.JS in Ordnung, aber nach dem Upgrade ich v2 ich den Fehler „Duplicate Vorhandensein von Slot‚default sehen‘in der gleichen Rendering-Struktur gefunden -. Dies dürfte dazu führen, werden Fehler machen“

Ist das in v2 möglich oder gibt es einen alternativen Weg, um dasselbe zu erreichen?

Answer 1

Es sieht aus wie Sie ein scoped slot dafür benötigen, so müssen Sie Ihren slot Inhalt in einer Vorlage mit einem scope Attribute wickeln:

<custommenu> 
    <template scope="colour"> 
    <span class="colour"></span> 
    </template> 
</custommenu> 

Dann müssen Sie, dass auf den Schlitz hinzuzufügen in Ihre Komponentenvorlage:

<ul> 
    <li v-for="item in options" :class="item.colour"> 
    <slot colour></slot> 
    <span class="label">{{item.name}}</span> 
    </li> 
</ul> 

Hier ist die aktualisierte JSFiddle: https://jsfiddle.net/kLge4wun/