插槽（vue2）
默认插槽
子组件：
vue体验AI代码助手代码解读复制代码<div class="layout-container"> <slot>普通插槽，默认内容</slot> </div>
父组件：
vue体验AI代码助手代码解读复制代码<layout> <template v-slot:default>默认插槽传递内容: default</template> </layout>
注意：
默认插槽在父组件中可以简写
vue体验AI代码助手代码解读复制代码<layout> 默认插槽传递内容: defaul </layout>从 Vue 2.6 起，引入了
v-slot指令（缩写为#），它是用来替代旧的slot和slot-scope语法
具名插槽
子组件：
vue体验AI代码助手代码解读复制代码<div class="layout-container"> <header > <slot name="header">具名插槽header，默认内容</slot> </header> <main > <slot name="main">具名插槽main，默认内容</slot> </main> <footer > <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>
注意：
具名插槽的另一种写法
vue体验AI代码助手代码解读复制代码<layout> <template #header>默认插槽传递内容: header</template> </layout>
从 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> 注意：
在 Vue 2.5 版本中，作用域插槽的语法发生了变化，
scope属性被弃用，取而代之的是slot-scope属性。从 Vue 2.5 开始，使用
slot-scope属性来接收子组件传递的数据，并且该属性可以用于普通元素。在 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 v-for="item in headerProps.hobby" :key="item" > {{ item }} </h2> </template> <template #main="mainProps"> <h2 v-for="item in mainProps.hobby" :key="item" > {{ item }} </h2> </template> <template #footer="footerProps"> <h2 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>