fix(collapse): fix collapse not emitting change (#949)

- Add emit when active changes

packages/collapse/__tests__/collapse.spec.ts

@@ -94,6 +94,7 @@ describe('Collapse.vue', () => {
   })
 
   test('event:change', async () => {
+    const onChange = jest.fn()
     const wrapper = mount({
       components: {
         'el-collapse': Collapse,
@@ -105,7 +106,7 @@ describe('Collapse.vue', () => {
         }
       },
       template: `
-        <el-collapse v-model="activeNames">
+        <el-collapse v-model="activeNames" @change="onChange">
           <el-collapse-item title="title1" name="1">
             <div class="content">111</div>
           </el-collapse-item>
@@ -120,6 +121,9 @@ describe('Collapse.vue', () => {
           </el-collapse-item>
         </el-collapse>
       `,
+      methods: {
+        onChange,
+      },
     })
 
     const vm = wrapper.vm
@@ -128,14 +132,16 @@ describe('Collapse.vue', () => {
     const collapseItemHeaderEls = vm.$el.querySelectorAll('.el-collapse-item__header')
     expect(collapseItemWrappers[0].vm.isActive).toBe(true)
     expect(vm.activeNames).toEqual(['1'])
-
+    expect(onChange).not.toHaveBeenCalled()
     collapseItemHeaderEls[2].click()
     await nextTick()
+    expect(onChange).toHaveBeenCalledTimes(1)
     expect(collapseItemWrappers[0].vm.isActive).toBe(true)
     expect(collapseItemWrappers[2].vm.isActive).toBe(true)
     expect(vm.activeNames).toEqual(['1', '3'])
     collapseItemHeaderEls[0].click()
     await nextTick()
+    expect(onChange).toHaveBeenCalledTimes(2)
     expect(collapseItemWrappers[0].vm.isActive).toBe(false)
     expect(vm.activeNames).toEqual(['3'])
   })

packages/collapse/src/collapse.vue

@@ -15,6 +15,7 @@ import {
   onUnmounted,
 } from 'vue'
 import mitt, { Emitter } from 'mitt'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
 
 export interface CollapseProvider {
   activeNames: Ref
@@ -31,7 +32,7 @@ export default defineComponent({
       default: () => [],
     },
   },
-  emits: ['update:modelValue'],
+  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],
   setup(props, { emit }) {
     const activeNames = ref([].concat(props.modelValue))
     const collapseMitt: Emitter = mitt()
@@ -39,7 +40,8 @@ export default defineComponent({
     const setActiveNames = _activeNames => {
       activeNames.value = [].concat(_activeNames)
       const value = props.accordion ? activeNames.value[0] : activeNames.value
-      emit('update:modelValue', value)
+      emit(UPDATE_MODEL_EVENT, value)
+      emit(CHANGE_EVENT, value)
     }
 
     const handleItemClick = name => {