插槽【vue2】与【vue3】对比

插槽（vue2）

默认插槽

子组件：

vue体验AI代码助手代码解读复制代码<div class="layout-container">   <slot>普通插槽，默认内容</slot> </div>

父组件：

vue体验AI代码助手代码解读复制代码<layout>   <template v-slot:default>默认插槽传递内容: default</template> </layout>

注意：

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

vue体验AI代码助手代码解读复制代码<layout>  默认插槽传递内容: defaul </layout>

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

具名插槽

子组件：

vue体验AI代码助手代码解读复制代码<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>

父组件：

vue体验AI代码助手代码解读复制代码<layout>   <template v-slot:header>默认插槽传递内容: header</template>   <template v-slot:main>默认插槽传递内容: main</template>   <template v-slot:footer>默认插槽传递内容: footer</template> </layout>

注意：

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

vue体验AI代码助手代码解读复制代码<layout>   <template #header>默认插槽传递内容: header</template> </layout>

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

作用域插槽

子组件：

vue体验AI代码助手代码解读复制代码<template>   <div class="layout-container">     <slot :hobby="hobby"> 默认插槽的默认内容 </slot>   </div> </template>  <script> export default {   name: 'layout',   data() {     return {       hobby: ['吃饭', '睡觉'],     };   }, }; </script>

父组件：

vue体验AI代码助手代码解读复制代码<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 指令（缩写为 #）来定义作用域插槽

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

子组件：

vue体验AI代码助手代码解读复制代码<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>

父组件：

vue体验AI代码助手代码解读复制代码<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 有一些细微的差异和增强。 0 1 2 3 4 5 6 7 8 9

具名插槽

特点1：

Vue 2 情况

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

Vue 3 特性

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

xml体验AI代码助手代码解读复制代码 <template>    <div>      <ChildComponent #header>         <h2>这是头部内容</h2>      </ChildComponent>    </div>  </template>

注意#header书写的位置

特点2:

Vue 2 限制

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

Vue 3 增强

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

xml体验AI代码助手代码解读复制代码 <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>