V-slot全面详解

<!-- 父组件 -->
<template>
  <BaseComponent>
    <template v-slot:default>
      这是默认插槽的内容
    </template>
  </BaseComponent>
</template>

<!-- 子组件 BaseComponent -->
<template>
  <div>
    <slot></slot>  <!-- 默认插槽 -->
  </div>
</template>

缩写：# 以及 default

<!-- 子组件 -->
<template>
  <div>
    <!-- 这是一个默认插槽 -->
    <slot></slot>
  </div>
</template>

<!-- 父组件使用方式 -->
<template>
  <ChildComponent>
    <!-- 方式1：直接使用 -->
    这是默认插槽的内容

    <!-- 方式2：使用具名default -->
    <template v-slot:default>
      这也是默认插槽的内容
    </template>

    <!-- 方式3：简写方式 -->
    <template #default>
      这还是默认插槽的内容
    </template>
  </ChildComponent>
</template>

请注意，以上三种书写形式表达式同一种含义。起到的作用都是从父组件把数据传向子组件。

1. default代表父组件将传入到子组件的默认模块。如果子组件的slot具有name属性值，则传入name对应的slot插槽。
2. 可以使用#来代替v-slot。

子组件
	   <:element="item" :index="index">

:element="item"

• :element="item"
• 作用： item 作为 element 属性传递给插槽。
• 用途：在父组件中可以通过解构插槽属性来访问每个列表项的数据。

父组件能够直接读取到对应v-slot的属性值

• 首先在子组件中由两个不同的name属性值，第一个是default，第二个是header。
• 每一个名字对应了在父组件中不同的作用域插槽。
• slot中的属性值能够直接被父组件中的作用域插槽读取，读取方式为在使用v-slot绑定了作用域后，通过等号来获取属性值。
• 子组件的属性值可以接下来放在元素文本中使用。
• 注意，如果传递多个值，则可以通过{}进行解构。

<!-- 子组件 -->
<template>
  <div>
    <!-- 默认作用域插槽 -->
    <slot :data="data"></slot>
    
    <!-- 具名作用域插槽 -->
    <slot name="header" :title="title"></slot>
  </div>
</template>

<!-- 父组件使用方式 -->
<template>
  <ChildComponent>
    <!-- 默认作用域插槽 -->
    <template v-slot:default="slotProps">
      {{ slotProps.data }}
    </template>

    <!-- 具名作用域插槽 -->
    <template v-slot:header="headerProps">
      {{ headerProps.title }}
    </template>
  </ChildComponent>
</template>