组件插槽可以便捷的设置组件内容。

<div id="app">
  <com-a>
    示例内容
    <span>组件的主体内容</span>
  </com-a>
</div>

单个插槽

如果我们希望组件标签可以像 HTML 标签一样设置内容，那么组件的使用灵活度会很高。

<div id="app">
  <p>示例内容1</p>
  <com-a>示例内容2</com-a>
</div>

但平常我们书写的组件，组件首尾标签中书写的内容会被抛弃。

<div id="app">
  <com-a></com-a>
</div>

我们需要通过 <slot> 进行插槽设置。

Vue.component('ComA', {
  tamplate: `
    <div>
      <h3>组件标题</h3>
      <slot></slot>
    </div>
  `
})

<div id="app">
  <com-a>
    示例内容
    <span>组件的主体内容</span>
  </com-a>
</div>

需要注意模板内容的渲染位置：

<div id="app">
  <com-a>
    这里只能访问父组件的数据
    {{ parValue }}
  </com-a>
</div>

var ComA = {
  template: `
    <div>
      <p>组件 A：</p>
      <slot><slot>
    </div>
  `
}
new Vue({
  el: '#app',
  data: { parValue: '父组件数据' },
  components: { ComA }
})

我们可以在 <slot> 中为插槽设置默认值，也称为后备内容。

<div id="app">
  <com-a></com-a>
</div>

var ComA = {
  template: `
    <div>
      <p>组件 A：</p>
      <slot>这是默认文本<slot>
    </div>
  `,
  data () {
    return {
      value: '子组件数量'
    }
  }
}

具名插槽

如果组件中有多个位置需要设置插槽，按需要给 <slot> 设置 name，称为具名插槽。不设置 name 的插槽为默认插槽。

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

在父组件中通过 template 占位符并设置 v-solt 对应同名插槽。并且 v-solt 只能在 template 中使用。

<com-a>
  <template v-slot:header>
    <h1>组件头部内容</h1>
  </template>
  <template v-slot:default>
    <p>组件主体内容第一段</p>
    <p>组件主体内容第二段</p>
  </template>
  <template v-slot:footer>
    <p>组件底部内容</p>
  </template>
</com-a>

默认插槽可以不设置 v-solt ，而其他具名插槽也可以通过 # 号简写 v-solt 。

<com-a>
  <template #header>
    <h1>组件头部内容</h1>
  </template>

  <p>组件主体内容第一段</p>
  <p>组件主体内容第二段</p>

  <template #footer>
    <p>组件底部内容</p>
  </template>
</com-a>

作用域插槽

作用域插槽用于让插槽可以使用子组件的数据。组件将需要被插槽使用的数据通过 v-bind 绑定给 <slot>，这种用于给插槽传递数据的属性称为插槽 prop。

var ComA = {
  template: `
    <div>
      <p>组件 A：</p>
      <slot :value="value">这是默认文本</slot>
    </div>
  `,
  data () {
    return {
      value: '子组件数据'
    }
  }
}

组件绑定数据后，插槽中需要通过 v-slot 接收数据。

<div id="app">
  <com-a>
    <template  v-slot:default="dataObj">
      {{ dataObj.value }}
    </template>
  </com-a>
</div>

如果只存在默认插槽，同时又需要接收数据，可以进行简写：

<div id="app">
  <com-a v-slot="dataObj">
    {{ dataObj.value }}
  </com-a>
</div>

还可以通过 ES6 的解构操作进行数据接收。

<div id="app">
  <com-a v-slot:default="{ value }">
    {{ value }}
  </com-a>
</div>