Dodawanie <slot> w obszarze powtarzalnych treści

Question

Mam składnik menu, który, uproszczony, przyjmuje rekwizyt z tablicy opcji i renderuje pozycję w menu dla każdego. Chciałem móc dostosować znaczniki znajdujące się w każdym z elementów menu w zależności od przypadku użycia, więc użyłem elementu zastępczego wewnątrz elementu menu.

Możesz zobaczyć przykład tego w tym 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'); 

To działało dobrze na V1 Vue.JS ale po uaktualnieniu do v2 widzę błąd „Duplikat obecność gniazda«default»znajdują się w tym samym uczynić drzewa. - to będzie prawdopodobnie powodować błędy renderowania”

Czy jest to coś, co jest możliwe w wersji 2 lub czy istnieje alternatywny sposób osiągnięcia tego samego?

Answer 1

Wygląda na to trzeba będzie scoped slot na to, więc trzeba będzie zawijać treści slot w szablonie z scope atrybut:

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

a następnie trzeba będzie dodać, że do gniazda w szablon komponent:

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

Oto zaktualizowana JSFiddle: https://jsfiddle.net/kLge4wun/