插槽【vue2】与 【vue3】对比

插槽（vue2）

默认插槽

子组件：

<div class="layout-container">
  <slot>普通插槽，默认内容</slot>
</div>

父组件：

<layout>
  <template v-slot:default>默认插槽传递内容: default</template>
</layout>

注意：

1. 默认插槽在父组件中可以简写

<layout>
 默认插槽传递内容: defaul
</layout>

从 Vue 2.6 起，引入了 v-slot 指令（缩写为 #），它是用来替代旧的 slot 和 slot-scope 语法

具名插槽

子组件：

<div class="layout-container">
  <header style="background-color: green">
    <slot name="header">具名插槽header，默认内容</slot>
  </header>
  <main style="background-color: yellow">
    <slot name="main">具名插槽main，默认内容</slot>
  </main>
  <footer style="background-color: yellowgreen">
    <slot name="footer">具名插槽footer，默认内容</slot>
  </footer>
</div>

父组件：

<layout>
  <template v-slot:header>默认插槽传递内容: header</template>
  <template v-slot:main>默认插槽传递内容: main</template>
  <template v-slot:footer>默认插槽传递内容: footer</template>
</layout>

注意：

1. 具名插槽的另一种写法

<layout>
  <template #header>默认插槽传递内容: header</template>
</layout>

2. 从 Vue 2.6 起，引入了 v-slot 指令（缩写为 #），它是用来替代旧的 slot 和 slot-scope 语法

作用域插槽

子组件：

<template>
  <div class="layout-container">
    <slot :hobby="hobby"> 默认插槽的默认内容 </slot>
  </div>
</template>

<script>
export default {
  name: 'layout',
  data() {
    return {
      hobby: ['吃饭', '睡觉'],
    };
  },
};
</script>

父组件：

<layout>
  <template #default="defaultProps">
    <h2
      v-for="item in defaultProps.hobby"
      :key="item"
    >
      {{ item }}
    </h2>
  </template>
</layout>

注意：

1. 在 Vue 2.5 版本中，作用域插槽的语法发生了变化，scope 属性被弃用，取而代之的是 slot-scope 属性。
2. 从 Vue 2.5 开始，使用 slot-scope 属性来接收子组件传递的数据，并且该属性可以用于普通元素。
3. 在 Vue 2.6.0 及以后的版本中，slot-scope 也被弃用，推荐使用 v-slot 指令（缩写为 #）来定义作用域插槽

具名插槽与作用域插槽连用

子组件：

<template>
  <div class="layout-container">
    <slot
      name="header"
      :hobby="hobby"
    >
      具名插槽header的默认内容
    </slot>
    <slot
      name="main"
      :hobby="hobby"
    >
      具名插槽main的默认内容
    </slot>
    <slot
      name="footer"
      :hobby="hobby"
    >
      具名插槽footer的默认内容
    </slot>
  </div>
</template>

<script>
export default {
  name: 'layout',
  data() {
    return {
      hobby: ['吃饭', '睡觉'],
    };
  },
};
</script>

父组件：

<layout>
  <template #header="headerProps">
    <h2
      style="background-color: yellow"
      v-for="item in headerProps.hobby"
      :key="item"
    >
      {{ item }}
    </h2>
  </template>
  <template #main="mainProps">
    <h2
      style="background-color: green"
      v-for="item in mainProps.hobby"
      :key="item"
    >
      {{ item }}
    </h2>
  </template>
  <template #footer="footerProps">
    <h2
      style="background-color: yellowgreen"
      v-for="item in footerProps.hobby"
      :key="item"
    >
      {{ item }}
    </h2>
  </template>
</layout>

插槽（vue3）

Vue 3 沿用了 Vue 2.6 引入的 v-slot 指令作为插槽的标准语法，但在具名插槽方面，Vue 3 相较于 Vue 2 有一些细微的差异和增强。

具名插槽

特点1：

Vue 2 情况

在 Vue 2 中，没有具名插槽的简写语法，无论什么情况都需要使用 <template> 标签包裹具名插槽内容。

Vue 3 特性

在 Vue 3 中，如果父组件只需要使用一个具名插槽，并且该插槽没有接收作用域数据，那么可以省略 <template> 标签，示例如下：

 <template>
   <div>
     <ChildComponent #header> 
       <h2>这是头部内容</h2>
     </ChildComponent>
   </div>
 </template>

注意#header书写的位置

特点2:

Vue 2 限制

Vue 2 不支持动态插槽名，你只能使用静态的字符串作为插槽名。

Vue 3 增强

Vue 3 支持动态插槽名，你可以使用 JavaScript 表达式作为插槽名，示例如下：

 <template>
   <div>
     <ChildComponent>
       <template #[dynamicSlotName]>
         <p>这是动态插槽内容</p>
       </template>
     </ChildComponent>
   </div>
 </template>
 ​
 <script setup>
 import { ref } from 'vue'
 import ChildComponent from './ChildComponent.vue'
 ​
 const dynamicSlotName = ref('header')
 </script>