diff --git a/packages/area/index.vue b/packages/area/index.js
similarity index 87%
rename from packages/area/index.vue
rename to packages/area/index.js
index dae337373..fa0d5c443 100644
--- a/packages/area/index.vue
+++ b/packages/area/index.js
@@ -1,34 +1,12 @@
-<template>
-  <picker
-    ref="picker"
-    :class="b()"
-    show-toolbar
-    value-key="name"
-    :title="title"
-    :loading="loading"
-    :columns="displayColumns"
-    :item-height="itemHeight"
-    :visible-item-count="visibleItemCount"
-    @change="onChange"
-    @confirm="$emit('confirm', $event)"
-    @cancel="$emit('cancel', $event)"
-  />
-</template>
-
-<script>
-import create from '../utils/create';
+import createSfc from '../utils/create';
 import Picker from '../picker';
 import PickerMixin from '../mixins/picker';
 
-export default create({
+export default createSfc({
   name: 'area',
 
   mixins: [PickerMixin],
 
-  components: {
-    Picker
-  },
-
   props: {
     value: String,
     areaList: {
@@ -63,6 +41,13 @@ export default create({
 
     displayColumns() {
       return this.columns.slice(0, +this.columnsNum);
+    },
+
+    listeners() {
+      return {
+        ...this.$listeners,
+        change: this.onChange
+      };
     }
   },
 
@@ -198,6 +183,22 @@ export default create({
       this.code = '';
       this.setValues();
     }
+  },
+
+  render(h) {
+    return (
+      <Picker
+        ref="picker"
+        class="van-area"
+        show-toolbar
+        value-key="name"
+        title={this.title}
+        loading={this.loading}
+        columns={this.displayColumns}
+        item-height={this.itemHeight}
+        visible-item-count={this.visibleItemCount}
+        {...{ on: this.listeners }}
+      />
+    );
   }
 });
-</script>
diff --git a/packages/area/test/index.spec.js b/packages/area/test/index.spec.js
index 65a1c8ce3..198b3733e 100644
--- a/packages/area/test/index.spec.js
+++ b/packages/area/test/index.spec.js
@@ -9,9 +9,15 @@ const firstOption = [
 ];
 
 test('confirm & cancel event', async () => {
+  const onConfirm = jest.fn();
+  const onCancel = jest.fn();
   const wrapper = mount(Area, {
     propsData: {
       areaList
+    },
+    listeners: {
+      confirm: onConfirm,
+      cancel: onCancel
     }
   });
 
@@ -20,8 +26,8 @@ test('confirm & cancel event', async () => {
   wrapper.find('.van-picker__confirm').trigger('click');
   wrapper.find('.van-picker__cancel').trigger('click');
 
-  expect(wrapper.emitted('confirm')[0][0]).toEqual(firstOption);
-  expect(wrapper.emitted('cancel')[0][0]).toEqual(firstOption);
+  expect(onConfirm.mock.calls[0][0]).toEqual(firstOption);
+  expect(onCancel.mock.calls[0][0]).toEqual(firstOption);
 });
 
 test('watch areaList & code', async () => {
diff --git a/packages/badge-group/index.js b/packages/badge-group/index.js
index 48ec3aa8a..c19fdaffc 100644
--- a/packages/badge-group/index.js
+++ b/packages/badge-group/index.js
@@ -1,7 +1,4 @@
 import createSfc from '../utils/create';
-import createBem from '../utils/bem';
-
-const bem = createBem('van-badge-group');
 
 export default createSfc({
   name: 'badge-group',
@@ -26,10 +23,6 @@ export default createSfc({
   },
 
   render(h) {
-    return (
-      <div class={['van-hairline--top-bottom', bem()]}>
-        {this.$slots.default}
-      </div>
-    );
+    return <div class="van-hairline--top-bottom van-badge-group">{this.$slots.default}</div>;
   }
 });