diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index d86023622..c0a7b34f3 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -2,13 +2,28 @@
 
 ### 基础用法
 
+<script>
+  export default {
+    data() {
+      return {
+        activeKey: '2'
+      };
+    },
+    methods: {
+      onItemClick(e, data) {
+        this.activeKey = data.mark;
+      }
+    }
+  };
+</script>
+
 :::demo 基础用法
 ```html
-<zan-badge-group active-key="2">
-  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
-  <zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
-  <zan-badge mark="2" title="火炽寿司"></zan-badge>
-  <zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
+<zan-badge-group :active-key="activeKey">
+  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
 </zan-badge-group>
 ```
 :::
diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue
index e6998998e..7e98f52fb 100644
--- a/packages/badge/src/badge-group.vue
+++ b/packages/badge/src/badge-group.vue
@@ -14,12 +14,6 @@
         type: [Number, String],
         default: 0
       }
-    },
-
-    data() {
-      return {
-        computedActiveKey: this.activeKey
-      };
     }
   };
 </script>
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
index e0406b3c2..43f827f21 100644
--- a/packages/badge/src/badge.vue
+++ b/packages/badge/src/badge.vue
@@ -19,21 +19,27 @@ export default {
       required: true
     },
     url: {
-      type: String
+      type: String,
+      default: 'javascript:;'
     },
     info: {
       type: String
     }
   },
   methods: {
-    handleClick() {
-      this.$parent.computedActiveKey = this.mark;
+    handleClick(e) {
+      this.$emit('click', e, {
+        mark: this.mark,
+        title: this.title,
+        url: this.url,
+        info: this.info
+      });
     }
   },
   computed: {
     classNames() {
       return {
-        'is-select': this.mark === this.$parent.computedActiveKey
+        'is-select': this.mark === this.$parent.activeKey
       };
     }
   }