插槽

普通具名插槽

通过根级 slot 数据指定：

<strong slot="header">header slot</strong>

scopedSlots

<SlotHost scopedSlots={{
  default: ({ message, count }) => <p>{message} × {count}</p>
}} />

完整示例

SlotHost.vue

<template>
  <article class="slot-host">
    <header><slot name="header">默认标题</slot></header>
    <main><slot :message="message" :count="count">默认内容</slot></main>
    <footer><slot name="footer">默认页脚</slot></footer>
  </article>
</template>

<script>
export default {
  name: 'SlotHost',
  data() {
    return { message: '来自 scoped slot', count: 2 }
  }
}
</script>

SlotsDemo.vue

<script lang="jsx">
import SlotHost from '../shared/SlotHost.vue'

export default {
  name: 'SlotsDemo',
  components: { SlotHost },
  render() {
    return (
      <article class="demo-card">
        <span class="case-label">slots / scopedSlots</span>
        <h3>普通插槽与作用域插槽</h3>
        <SlotHost scopedSlots={{
          default: ({ message, count }) => <p>{message} × {count}</p>
        }}>
          <strong slot="header">header slot</strong>
          <small slot="footer">footer slot</small>
        </SlotHost>
      </article>
    )
  }
}
</script>