diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index c73d6a8e5..fee5fda1e 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -5,10 +5,10 @@
 :::demo 样例代码
 ```html
 <z-badge-group>
-  <z-badge is-selected value="热销榜" info="8"></z-badge>
-  <z-badge value="花式寿司" info="99"></z-badge>
-  <z-badge value="火炽寿司"></z-badge>
-  <z-badge value="手握寿司" info="199"></z-badge>
+  <z-badge badge-key="0" title="热销榜" info="8"></z-badge>
+  <z-badge badge-key="1" title="花式寿司" info="99"></z-badge>
+  <z-badge badge-key="2" title="火炽寿司"></z-badge>
+  <z-badge badge-key="3" title="手握寿司" info="199"></z-badge>
 </z-badge-group>
 ```
 :::
\ No newline at end of file
diff --git a/packages/badge/mixin/emitter.js b/packages/badge/mixin/emitter.js
new file mode 100644
index 000000000..2e25c831f
--- /dev/null
+++ b/packages/badge/mixin/emitter.js
@@ -0,0 +1,34 @@
+function broadcast(componentName, eventName, ...params) {
+  this.$children.forEach(child => {
+    var name = child.$options.componentName;
+
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params));
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat(params));
+    }
+  });
+}
+export default {
+  methods: {
+    $dispatch(componentName, eventName, ...params) {
+
+      var parent = this.$parent || this.$root;
+      var name = parent.$options.componentName;
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+
+        if (parent) {
+          name = parent.$options.componentName;
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params));
+      }
+    },
+    $broadcast(componentName, eventName, ...params) {
+      broadcast.call(this, componentName, eventName, ...params);
+    }
+  }
+};
diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue
index 1b928e828..231a60f9c 100644
--- a/packages/badge/src/badge-group.vue
+++ b/packages/badge/src/badge-group.vue
@@ -6,6 +6,11 @@
 
 <script>
 export default {
-  name: 'z-badge-group'
+  name: 'z-badge-group',
+  data () {
+    return {
+      activeKey: '0'
+    }
+  }
 };
 </script>
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
index e8df950ab..a21163aff 100644
--- a/packages/badge/src/badge.vue
+++ b/packages/badge/src/badge.vue
@@ -1,22 +1,41 @@
 <template>
-    <a class="z-badge" :class="{ 'is-select' : isSelected }" :href="url" @click="handleClick">
+    <a class="z-badge" :class="classNames" :href="url" @click="handleClick">
       <div class="z-badge__active"></div>
       <div v-if="info" class="z-badge__info">{{info}}</div>
-      {{value}}
+      {{title}}
     </a>
 </template>
 <script>
 export default {
   name: 'z-badge',
   props: {
+    badgeKey: {
+      type: [Number, String],
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
     url: String,
     value: String,
-    info: String,
-    isSelected: Boolean
+    info: String
+  },
+  data () {
+    return {
+      isSelected: false
+    }
   },
   methods: {
     handleClick() {
-      this.$emit('click');
+      this.$parent.activeKey = this.badgeKey;
+    }
+  },
+  computed: {
+    classNames () {
+      return {
+        'is-select': this.badgeKey == this.$parent.activeKey ? true : false
+      }
     }
   }
 };