区分Vue 2和Vue 3中Element UI Collapse组件的实现与功能

在 Vue 2 的开发环境中，Element UI 是常用的组件库，而在 Vue 3 的框架下，开发者则倾向于采用 Element Plus 以实现类似的功能支持。针对 Collapse 折叠面板这一组件，两个库均提供了功能相近的接口设计，但在具体属性设置、触发事件以及操作方法方面可能存在细微差异。接下来将分别对 Vue 2 中 Element UI 的 Collapse 组件与 Vue 3 中 Element Plus 的 Collapse 组件所具备的属性、事件及方法进行详细说明，并结合实例加以展示。

Vue 2 + Element UI Collapse

属性（Props）

• value / v-model: 用于绑定数据，表示当前被激活面板的名称，支持通过 v-model 实现双向数据绑定。
  • accordion: 用于控制是否启用手风琴模式，即是否限制仅能同时展开一个面板。

事件（Events）

• change: 在激活面板发生变动时触发该事件，用于获取当前被激活面板的名称及其对应的索引值。

Element UI Collapse 方法访问限制

Element UI 中的 Collapse 组件一般不会将相关方法直接提供给外部进行调用。

示例

    <template>