vue插槽slot、slot-scope、v-slot的区别以及嵌套插槽的使用

在Vue中，插槽是一种让父组件能够向子组件传递标记的方法。Vue 2.5 引入了具名插槽和作用域插槽的概念。

1. 插槽（Slot）：插槽是一种特殊的VNode，表示父组件要插入子组件的地方。

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>
 
<!-- 父组件 -->
<template>
  <child-component>
    <p>这里是插入的内容</p>
  </child-component>
</template>

2. 作用域插槽（Scoped Slots）：类似于函数，可以传递数据到插槽。

<!-- 子组件 -->
<template>
  <div>
    <slot :text="message"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from child'
    }
  }
}
</script>
 
<!-- 父组件 -->
<template>
  <child-component>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.text }}</p>
    </template>
  </child-component>
</template>

3. slot-scope（Vue 2.5以前的语法）：用于2.5版本以前的作用域插槽。

<!-- 子组件 -->
<template>
  <div>
    <slot :text="message"></slot>
  </div>
</template>
 
<!-- 父组件 -->
<template>
  <child-component>
    <template slot-scope="slotProps">
      <p>{{ slotProps.text }}</p>
    </template>
  </child-component>
</template>

4. 嵌套插槽：允许插槽内容包含额外的插槽。

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
 
<!-- 父组件 -->
<template>
  <child-component>
    <template v-slot:header>
      <p>这是头部内容</p>
    </template>
    <p>这是默认插槽内容</p>
    <template v-slot:footer>
      <p>这是底部内容</p>
    </template>
  </child-component>
</template>

在Vue 2.6+，slot-scope被v-slot取代，并且进行了简化。v-slot可以直接在template标签上使用，也可以使用更简洁的语法：#定义具名插槽，v-slot:替换为#。

<!-- 父组件 -->
<template v-slot:header="slotProps">
  <p>{{ slotProps.text }}</p>
</template>
 
<!-- 简化语法 -->
<template #header="slotProps">
  <p>{{ slotProps.text }}</p>
</template>