第二十四节:带你梳理Vue2 : Vue具名插槽/作用域插槽/v-slot指令

在Vue中，插槽是一种让父组件能够向子组件传递内容的方法。具名插槽和作用域插槽是Vue中插槽的两种高级用法。

1. 具名插槽（Named Slots）：可以通过v-slot指令（在Vue 2.6.0+中用v-slot替代了slot和slot-scope）来使用具名插槽。

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

2. 作用域插槽（Scoped Slots）：可以通过v-slot指令的绑定值来接收从子组件传递的数据。

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>来自子组件的数据: {{ slotProps.data }}</p>
    </template>
  </ChildComponent>
</template>
 
<!-- 子组件 -->
<template>
  <div>
    <!-- 传递数据到默认插槽 -->
    <slot :data="childData"></slot>
  </div>
</template>

在这个例子中，slotProps是一个包含了子组件传递数据的对象，你可以通过slotProps.data来访问子组件传递的数据。