【区分vue2和vue3下的element UI Collapse 折叠面板组件，分别详细介绍属性，事件，方法如何使用，并举例】

本文链接：https://blog.youkuaiyun.com/xiejunlan/article/details/140378155

在 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: 绑定值，当前激活的面板的 name，可以使用 v-model 双向绑定。
accordion: 是否手风琴模式，即是否只允许同时展开一个面板。

事件（Events）

change: 当前激活面板改变时触发，返回当前激活的面板的 name 和 index。

方法（通常不直接暴露，但可通过 `$refs` 访问内部方法，但 Element UI Collapse 通常不提供直接的方法）

Element UI 的 Collapse 组件通常不直接暴露方法供外部调用。

示例

<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item title="一致性" name="1">
      <p>与用户