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.

为什么我的作用域插槽没有显示任何内容？

1 个答案: