爲什麼我的scoped插槽不顯示任何內容？

Question

我試圖使用Vue公司的scoped slots：

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> 

然而，槽顯示在頁面上。控制檯沒有錯誤：

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

我在做什麼錯了？

注意：我正在使用Vue 2.3.4

Answer 1

您已經翻譯了語法。你需要在子組件定義slot標籤：

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

然後，在父組件，使用template標籤與slot屬性的內容傳遞給使用該插槽：

<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.