<slot>を反復コンテンツ領域に追加する

Question

私は、単純に、オプションの配列を持つ小道具を​​持ち、それぞれのメニューのアイテムをレンダリングするメニューコンポーネントを持っています。私は、それぞれのメニュー項目の中にあったマークアップをユースケースに応じてカスタマイズできるようにしたいので、メニュー項目要素内にプレースホルダを使用しました。

この例は、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.JSのV1にうまく働いたが、V2にアップグレードした後、私は、デフォルトのエラー「スロットの重複存在 『見ている』と同じレンダリングツリーで見つかったが - 。これはおそらく、エラーをレンダリングする原因になります」

これはv2で可能なのでしょうか、同じことを達成する別の方法がありますか？

Answer 1

あなたはscope属性をテンプレートにあなたのslotコンテンツをラップする必要がありますので、あなたは、このためのscoped slotが必要になりますように見えます：

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

そして、あなたがスロットにそれを追加する必要がありますコンポーネントテンプレート：

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

はここで更新JSFiddleです：https://jsfiddle.net/kLge4wun/