diff --git a/components/collapse/Collapse.vue b/components/collapse/Collapse.vue
index 3ba718b4e..4bc4efe4e 100644
--- a/components/collapse/Collapse.vue
+++ b/components/collapse/Collapse.vue
@@ -6,6 +6,10 @@ import RcCollapse from './src'
 import { collapseProps } from './src/commonProps'
 
 export default {
+  model: {
+    prop: 'activeKey',
+    event: 'change',
+  },
   props: {
     ...collapseProps,
     bordered: PropTypes.bool.def(true),
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
index 7345efb1b..fae84a3ad 100644
--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@@ -12,13 +12,13 @@ Accordion mode, only one panel can be expanded at a time. The first panel will b
 <template>
   <div>
     <a-collapse accordion>
-      <a-collapse-panel header="This is panel header 1" name="1">
+      <a-collapse-panel header="This is panel header 1" key="1">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+      <a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3">
+      <a-collapse-panel header="This is panel header 3" key="3">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
index 767dd1043..009f30f29 100644
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@@ -11,14 +11,14 @@ More than one panel can be expanded at a time, the first panel is initialized to
 ```html
 <template>
   <div>
-    <a-collapse v-model="value" @change="changeActivekey">
-      <a-collapse-panel header="This is panel header 1" name="1">
+    <a-collapse v-model="activeKey" @change="changeActivekey">
+      <a-collapse-panel header="This is panel header 1" key="1">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+      <a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3" disabled>
+      <a-collapse-panel header="This is panel header 3" key="3" disabled>
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>
@@ -29,7 +29,7 @@ More than one panel can be expanded at a time, the first panel is initialized to
     data () {
       return {
         text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
-        value: ['1']
+        activeKey: ['1']
       }
     },
     methods: {
diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md
index e99c50bb6..8de8aa079 100644
--- a/components/collapse/demo/borderless.md
+++ b/components/collapse/demo/borderless.md
@@ -11,14 +11,14 @@ A borderless style of Collapse.
 ```html
 <template>
   <div>
-    <a-collapse :defaultValue="'1'" :bordered="false">
-      <a-collapse-panel header="This is panel header 1" name="1">
+    <a-collapse defaultActiveKey="1" :bordered="false">
+      <a-collapse-panel header="This is panel header 1" key="1">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+      <a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3">
+      <a-collapse-panel header="This is panel header 3" key="3">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
index dc37400e5..3cad89c05 100644
--- a/components/collapse/demo/custom.md
+++ b/components/collapse/demo/custom.md
@@ -11,14 +11,14 @@ Customize the background, border and margin styles for each panel.
 ```html
 <template>
   <div>
-    <a-collapse :defaultValue="'1'" :bordered="false">
-      <a-collapse-panel header="This is panel header 1" name="1" :style="customStyle">
+    <a-collapse defaultActiveKey="1" :bordered="false">
+      <a-collapse-panel header="This is panel header 1" key="1" :style="customStyle">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :style="customStyle">
+      <a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3" :style="customStyle">
+      <a-collapse-panel header="This is panel header 3" key="3" :style="customStyle">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
index 27cf763ec..fef80121e 100644
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@@ -12,17 +12,17 @@
 <template>
   <div>
     <a-collapse @change="changeActivekey">
-      <a-collapse-panel header="This is panel header 1" name="1">
-        <a-collapse :defaultValue="'1'">
-          <a-collapse-panel header="This is panel nest panel" name="1">
+      <a-collapse-panel header="This is panel header 1" key="1">
+        <a-collapse defaultActiveKey="4">
+          <a-collapse-panel header="This is panel nest panel" key="4">
             <p>{{text}}</p>
           </a-collapse-panel>
         </a-collapse>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 2" name="2" :disabled='false'>
+      <a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header 3" name="3">
+      <a-collapse-panel header="This is panel header 3" key="3">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>
diff --git a/components/collapse/demo/noarrow.md b/components/collapse/demo/noarrow.md
index 8b4b6e59e..4e361a5de 100644
--- a/components/collapse/demo/noarrow.md
+++ b/components/collapse/demo/noarrow.md
@@ -11,11 +11,11 @@ You can disable showing arrow icon by passing `:showArrow="false"` to `a-collaps
 ```html
 <template>
   <div>
-    <a-collapse :defaultValue="'1'" @change="changeActivekey">
-      <a-collapse-panel header="This is panel header with arrow icon" name="1">
+    <a-collapse defaultActiveKey="1" @change="changeActivekey">
+      <a-collapse-panel header="This is panel header with arrow icon" key="1">
         <p>{{text}}</p>
       </a-collapse-panel>
-      <a-collapse-panel header="This is panel header with no arrow icon" name="2" :showArrow="false">
+      <a-collapse-panel header="This is panel header with no arrow icon" key="2" :showArrow="false">
         <p>{{text}}</p>
       </a-collapse-panel>
     </a-collapse>
diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md
index 6053afb58..351660938 100644
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@@ -4,8 +4,8 @@
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| value | name of the active panel | \[]\|string | No default value. In `accordion` mode, it's the name of the first panel. |
-| defaultValue | name of the initial active panel | string | - |
+| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
+| defaultActiveKey | Key of the initial active panel | string | - |
 | change | Callback function executed when active panel is changed | Function | - |
 
 ### Collapse.Panel
@@ -14,5 +14,5 @@
 | -------- | ----------- | ---- | ------- |
 | disabled | If `true`, panel cannot be opened or closed | boolean | `false` |
 | header | Title of the panel | string | - |
-| name | Unique name identifying the panel from among its siblings | string | - |
+| key | Unique key identifying the panel from among its siblings | string | - |
 | showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md
index 9a2715c59..13ff538d9 100644
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@@ -4,8 +4,8 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前激活 tab 面板的 name | []\|string | 默认无，accordion模式下默认第一个元素 |
-| defaultValue | 初始化选中面板的 name | string | 无 |
+| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
+| defaultActiveKey | 初始化选中面板的 key | string | 无 |
 | change | 切换面板的回调 | Function | 无 |
 
 ### Collapse.Panel
@@ -14,4 +14,4 @@
 | --- | --- | --- | --- |
 | disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
 | header | 面板头内容 | string | 无 |
-| name | 对应 activeKey | string | 无 |
+| key | 对应 activeKey | string | 无 |
diff --git a/components/collapse/src/Collapse.vue b/components/collapse/src/Collapse.vue
index fa2cf050e..ad4ce616e 100644
--- a/components/collapse/src/Collapse.vue
+++ b/components/collapse/src/Collapse.vue
@@ -17,15 +17,19 @@ function _toArray (activeKey) {
 export default {
   name: 'Collapse',
   mixins: [BaseMixin],
+  model: {
+    prop: 'activeKey',
+    event: 'change',
+  },
   props: {
     ...collapseProps,
     openAnimation: PropTypes.object,
   },
   data () {
-    const { value, defaultValue, openAnimation, prefixCls } = this.$props
-    let currentActiveKey = defaultValue
-    if (hasProp(this, 'value')) {
-      currentActiveKey = value
+    const { activeKey, defaultActiveKey, openAnimation, prefixCls } = this.$props
+    let currentActiveKey = defaultActiveKey
+    if (hasProp(this, 'activeKey')) {
+      currentActiveKey = activeKey
     }
     const currentOpenAnimations = openAnimation || openAnimationFactory(prefixCls)
     return {
@@ -57,18 +61,19 @@ export default {
       const newChildren = []
       this.$slots.default.forEach((child, index) => {
         if (isEmptyElement(child)) return
-        const { header, headerClass, disabled, name = String(index) } = getPropsData(child)
+        const { header, headerClass, disabled } = getPropsData(child)
         let isActive = false
+        const key = child.key || String(index)
         if (accordion) {
-          isActive = activeKey[0] === name
+          isActive = activeKey[0] === key
         } else {
-          isActive = activeKey.indexOf(name) > -1
+          isActive = activeKey.indexOf(key) > -1
         }
 
         let panelEvents = {}
         if (!disabled && disabled !== '') {
           panelEvents = {
-            itemClick: () => { this.onClickItem(name) },
+            itemClick: () => { this.onClickItem(key) },
           }
         }
 
@@ -93,11 +98,10 @@ export default {
     setActiveKey (activeKey) {
       this.setState({ stateActiveKey: activeKey })
       this.$emit('change', this.accordion ? activeKey[0] : activeKey)
-      this.$emit('input', this.accordion ? activeKey[0] : activeKey)
     },
   },
   watch: {
-    value (val) {
+    activeKey (val) {
       this.setState({
         stateActiveKey: _toArray(val),
       })
diff --git a/components/collapse/src/PanelContent.vue b/components/collapse/src/PanelContent.vue
index 36c13bb14..7d726eda6 100644
--- a/components/collapse/src/PanelContent.vue
+++ b/components/collapse/src/PanelContent.vue
@@ -8,8 +8,14 @@ export default {
     isActive: PropTypes.bool,
     destroyInactivePanel: PropTypes.bool,
   },
+  data () {
+    return {
+      _isActive: undefined,
+    }
+  },
   render () {
-    if (!this.isActive) {
+    this._isActive = this._isActive || this.isActive
+    if (!this._isActive) {
       return null
     }
     const { prefixCls, isActive, destroyInactivePanel } = this.$props
diff --git a/components/collapse/src/commonProps.js b/components/collapse/src/commonProps.js
index 13008a9a2..f69d41f76 100644
--- a/components/collapse/src/commonProps.js
+++ b/components/collapse/src/commonProps.js
@@ -2,11 +2,11 @@ import PropTypes from '../../_util/vue-types'
 
 const collapseProps = {
   prefixCls: PropTypes.string.def('ant-collapse'),
-  value: PropTypes.oneOfType([
+  activeKey: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
   ]),
-  defaultValue: PropTypes.oneOfType([
+  defaultActiveKey: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
   ]),