vue折叠面板通过具名插槽分离标题与内容、作用域插槽传递isopen和toggle状态，支持自定义布局与交互；可嵌套组件、动态渲染，需避免直接修改props及插槽未配对等问题。
Vue 组件插槽实现折叠面板的标题与内容自定义布局，核心在于用具名插槽分离结构、用作用域插槽传递内部状态，让父组件完全掌控渲染逻辑。
用具名插槽区分标题和内容区域
在折叠面板子组件中，为标题和内容分别预留具名插槽，避免硬编码，提升复用性：
- 子组件模板里定义：
<slot name="header"></slot>放标题位置，<slot name="content"></slot>放展开区域 - 父组件使用时，用
<template>...</template>和<template>...</template>分别传入定制内容 - 这样标题可以是图标+文字+按钮组合，内容可以是 HTML 片段、表格甚至另一个组件，互不干扰
通过作用域插槽暴露展开状态和控制方法
仅传内容不够——父组件常需根据当前是否展开来调整样式或行为。这时要绑定数据到 slot 上：
- 子组件中：
<slot name="header" :is-open="isOpen" :toggle="toggle"></slot> - 父组件接收：
<template isopen toggle><button>{{ isOpen ? '收起' : '展开' }}</button></template> - 这样一来，展开/收起逻辑仍由子组件管理，但触发方式和文案完全由父组件决定
支持多级嵌套与动态结构
插槽天然支持嵌套，适合复杂面板场景：
- 标题插槽内可再嵌套一个
<accordion></accordion>组件，实现“面板套面板” - 内容插槽中可用
v-for渲染列表，或用<component :is="dynamicComp"></component>动态切换视图 - 配合
v-if或v-show控制插槽内容显隐，比单纯靠 CSS 更语义化、更可控
避免常见陷阱
实际使用中容易忽略的细节：
-
不要在插槽内直接修改 props：比如把
toggle方法传进作用域插槽后，父组件调用没问题，但不能在插槽里去改子组件的响应式状态（如直接赋值isOpen = true） -
具名插槽必须配对使用：如果子组件声明了
name="footer"，而父组件没提供对应#footer，该位置就为空，不会报错但易被忽略 -
作用域插槽变量名可自定义：
v-slot="{ isOpen, toggle }"中的isOpen是子组件绑定的属性名，不是固定关键字，命名需与子组件一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
