javascript - 为什么我的作用域插槽不显示任何内容？

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.