为什么我的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.