Vue 插槽 Slots源码解析与用法详解

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <h2>组件标题</h2>
    <slot></slot>
  </div>
</template>
<!-- 父组件 -->
<template>
  <div>
    <my-component>
      <p>这是插入的内容。</p>
    </my-component>
  </div>
</template>
<script>
export default {
  // ...其他配置
  render(h) {
    return h('div', [
      h('h2', '组件标题'),
      this.$slots.default // 默认插槽的内容
    ]);
  }
}
</script>

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
<!-- 父组件 -->
<template>
  <div>
    <my-component>
      <template v-slot:header>
        <h2>这是头部</h2>
      </template>
      <p>这是主要内容。</p>
      <template v-slot:footer>
        <p>这是底部</p>
      </template>
    </my-component>
  </div>
</template>
<script>
export default {
  // ...其他配置
  render(h) {
    return h('div', [
      h('header', this.$slots.header), // 具名插槽的内容
      h('main', this.$slots.default),  // 默认插槽的内容
      h('footer', this.$slots.footer)  // 具名插槽的内容
    ]);
  }
}
</script>

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <!-- 作用域插槽 -->
        <slot :item="item"></slot>
      </li>
    </ul>
  </div>
</template>
<!-- 父组件 -->
<template>
  <div>
    <my-component>
      <!-- 作用域插槽的使用 -->
      <template v-slot="{ item }">
        <p>{{ item.name }}</p>
      </template>
    </my-component>
  </div>
</template>
<script>
export default {
  // ...其他配置
  render(h) {
    return h('div', [
      h('ul', this.items.map(item => 
        h('li', [
          // 作用域插槽的内容
          this.$scopedSlots.default({ item })
        ])
      ))
    ]);
  }
}
</script>