slot插槽使用

• 子组件 base-layout

<!-- 子组件：base-layout -->
<template>
  <div>
    <slot name="header">备用值</slot>
    <!-- name 默认值为 default 即：默认插槽 -->
    <slot></slot>  
    <slot name="footer"></slot>  
  </div>
</template>

slot废弃写法

在 template元素上设置 slot 属性，如：

<!-- 父组件 -->
<base-layout>
  <!-- 内部包裹的内容作为组件的插槽插入 -->
  <!-- 这种写法已废弃 -->
  <template slot="header">头部内容</template>
  
  <p>当包裹的内容未设置 slot 时，默认作为 name:default 的内容</p>

    <!-- 这种写法已废弃 -->
  <p slot="footer">slot 不一定需要搭配 template 标签使用 </p>
</base-layout>

slot推荐写法

<!-- 父组件 -->
<base-layout>
  <template v-slot:header>头部内容</template>
  
  <p>当包裹的内容未设置 slot 时，默认作为 default 的内容</p>
  
  <template v-slot:footer>v-slot指令只能在 template 上使用</template>
</base-layout>

slot-scope废弃写法

<!-- 父组件 -->
<base-layout>
  <template slot="header" slot-scope="slotProps">{{slotProps.title}}</template>
  <p>当包裹的内容未设置 slot 时，默认作为 default 的内容</p>
</base-layout>

slot-scope推荐写法

注意 v-slot: v-slot= 以及 v-slot:name= 含义及区别

<!-- 父组件 -->
<base-layout>
  <template v-slot:header="slotProps">{{slotProps.title}}</template>
  
  <template v-slot="defaultProps">给默认插槽穿props</template>
  
  <template v-slot:default="defaultProps">或者</template>
</base-layout>