默认插槽：

这是最基本的插槽类型，当没有指定 name 属性时，插槽是默认插槽。

子组件：

<template><div class="child"><h2>子组件内容</h2><slot></slot> <!-- 默认插槽，插入父组件传递的内容 --></div>
</template>

父组件：

<template><ChildComponent><p>这是插入到默认插槽的内容</p></ChildComponent>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent }
};
</script>

具名插槽：

具名插槽允许在组件中定义多个插槽，并在父组件中指定每个插槽的内容。

• 子组件 ChildComponent 定义了两个具名插槽：header 和 footer。
• 父组件通过 <template #header> 和 <template #footer> 向这些具名插槽传递内容。

子组件：

<template><div class="child"><h2>子组件内容</h2><slot name="header"></slot> <!-- 具名插槽 "header" --><slot name="footer"></slot> <!-- 具名插槽 "footer" --></div>
</template>

父组件：

<template><ChildComponent><template #header><h3>这是插入到 header 插槽的内容</h3></template><template #footer><p>这是插入到 footer 插槽的内容</p></template></ChildComponent>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent }
};
</script>

作用域插槽：

作用域插槽允许子组件将数据传递给父组件，并由父组件决定如何渲染这些数据。

• 子组件 ChildComponent 使用作用域插槽向父组件传递 user 数据。
• 父组件通过解构 { user } 接收并使用这些数据来渲染内容。

子组件：

<template><div class="child"><slot :user="user"></slot> <!-- 作用域插槽，传递 `user` 数据 --></div>
</template><script>
export default {data() {return {user: { name: 'Alice', age: 25 }};}
};
</script>

父组件：

<template><ChildComponent><template #default="{ user }"> <!-- 接收子组件传递的 `user` 数据 --><p>用户名: {{ user.name }}</p><p>用户年龄: {{ user.age }}</p></template></ChildComponent>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent }
};
</script>

动态插槽名：

动态插槽名允许根据运行时条件来决定使用哪个插槽。

• 子组件 ChildComponent 接收一个 dynamicSlot 属性，动态决定使用哪个插槽。
• 父组件可以通过改变 currentSlot 的值来切换显示的内容。

子组件：

<template><div class="child"><slot :name="dynamicSlot"></slot> <!-- 动态插槽名 --></div>
</template><script>
export default {props: ['dynamicSlot']
};
</script>

父组件：

<template><ChildComponent :dynamicSlot="currentSlot"><template #slot1><p>这是 slot1 的内容</p></template><template #slot2><p>这是 slot2 的内容</p></template></ChildComponent>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {currentSlot: 'slot1' // 可以根据条件变更为 'slot2'};}
};
</script>

插槽默认类容：

如果父组件不提供内容，插槽可以显示默认内容。

• 如果父组件没有向 ChildComponent 的默认插槽传递任何内容，那么子组件将显示默认内容 “这是插槽的默认内容”。

子组件：

<template><div class="child"><slot>这是插槽的默认内容</slot> <!-- 默认内容 --></div>
</template>

父组件：

<template><ChildComponent><!-- 没有插入任何内容时，显示子组件定义的默认内容 --></ChildComponent>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent }
};
</script>