Warum zeigt mein Scoped-Slot nichts an?

Question

Ich versuche scoped slots Vues zu verwenden:

App.vue:

<template> 
    <div id="app"> 
    <b-grid> 
     <slot name="col" :col="2"> 
     <p>Some test</p> 
     </slot> 
    </b-grid> 
    </div> 
</template> 

BGrid.vue

<template> 
    <div class="b-grid"> 
    <div class="container"> 
     <div class="row"> 
     <template slot="col" scope="props"> 
      <div :class="'col' + props.col">This is a column</div> 
     </template> 
     </div> 
    </div> 
    </div> 
</template> 

jedoch der Schlitz auf der Seite angezeigt wird. Keine Fehler in der Konsole:

<div id="app"> 
    <div class="b-grid"> 
    <div class="container"> 
     <div class="row"></div> 
    </div> 
    </div> 
</div> 

Was mache ich falsch?

Hinweis: Ich bin mit Vue 2.3.4

Answer 1

Sie haben die Syntax leicht geschlagen bekommen. Sie benötigen einen slot-Tag in der Kind-Komponente zu definieren:

<div class="b-grid"> 
    <div class="container"> 
    <div class="row"> 
     <slot name="col" :col="2"></slot> 
    </div> 
    </div> 
</div> 

Dann in der übergeordneten Komponente, verwenden Sie den template-Tag mit dem slot Attribute in dem Inhalt zu übergeben für diesen Schlitz zu verwenden:

<div id="app"> 
    <b-grid> 
    <template slot="col" scope="props"> 
     <div :class="'col' + props.col">This is a column</div> 
    </template> 
    </b-grid> 
</div> 

Here's a fiddle.