Yinelenen içerik bölgesinde <slot> ekleniyor

Question

Basitçe, bir dizi seçenek ile bir pervane almak ve her biri için menüde bir öğe oluşturan bir menü bileşenim var. Menü öğesi öğesinin içindeki yer tutucuyu kullanabilmem için kullanım nesnesine bağlı olarak menü öğelerinin her birinin içindeki işaretlemeyi özelleştirebilmeyi istedim.

Bu örnekte bu fiddle'da görebilirsiniz.

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

Bu

Vue.JS ait v1 ama varsayılan "yuvası Kopyaları varlığının 'hatası görüyorum v2 yükselttikten sonra iyi çalıştı' Aynı işlemek ağacında bulunan -. Bu hataları işlemek olasılıkla neden olur"

Bu, v2'de mümkün olan veya aynı şeyi elde etmenin alternatif bir yolu var mı? Bunun için bir scoped slot ihtiyacımız olacak gibi

Answer 1

görünüyor, bu nedenle bir scope özelliğiyle bir şablona slot içeriği sarmak gerekir:

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

Sonra sen yuvaya eklemek gerekir Eğer bileşen şablonu:

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

İşte güncellenen JSFiddle var: https://jsfiddle.net/kLge4wun/