diff --git a/src/action-bar-button/index.js b/src/action-bar-button/index.js
index 77d819131..f145032ad 100644
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@@ -18,47 +18,35 @@ export default createComponent({
     disabled: Boolean,
   },
 
-  emits: ['click'],
+  setup(props, { slots }) {
+    return (vm) => {
+      const { type, icon, text, color, loading, disabled } = props;
 
-  computed: {
-    isFirst() {
-      const prev = this.parent && this.parent.children[this.index - 1];
-      return !prev || prev.$options.name !== this.$options.name;
-    },
+      const { parent } = vm;
+      const { name } = vm.$options;
+      const prev = parent && parent.children[vm.index - 1];
+      const next = parent && parent.children[vm.index + 1];
+      const last = !next || name !== next.$options.name;
+      const first = !prev || name !== prev.$options.name;
 
-    isLast() {
-      const next = this.parent && this.parent.children[this.index + 1];
-      return !next || next.$options.name !== this.$options.name;
-    },
-  },
+      const onClick = () => {
+        route(vm.$router, vm);
+      };
 
-  methods: {
-    onClick(event) {
-      this.$emit('click', event);
-      route(this.$router, this);
-    },
-  },
-
-  render() {
-    return (
-      <Button
-        class={bem([
-          {
-            first: this.isFirst,
-            last: this.isLast,
-          },
-          this.type,
-        ])}
-        size="large"
-        type={this.type}
-        icon={this.icon}
-        color={this.color}
-        loading={this.loading}
-        disabled={this.disabled}
-        onClick={this.onClick}
-      >
-        {this.$slots.default ? this.$slots.default() : this.text}
-      </Button>
-    );
+      return (
+        <Button
+          class={bem([type, { last, first }])}
+          size="large"
+          type={type}
+          icon={icon}
+          color={color}
+          loading={loading}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          {slots.default ? slots.default() : text}
+        </Button>
+      );
+    };
   },
 });
diff --git a/src/action-bar-icon/index.js b/src/action-bar-icon/index.js
index c47dee5bf..170bebac0 100644
--- a/src/action-bar-icon/index.js
+++ b/src/action-bar-icon/index.js
@@ -19,42 +19,42 @@ export default createComponent({
     iconClass: null,
   },
 
-  emits: ['click'],
+  setup(props, { slots }) {
+    function genIcon() {
+      const { dot, badge, icon, color, iconClass } = props;
 
-  methods: {
-    onClick(event) {
-      this.$emit('click', event);
-      route(this.$router, this);
-    },
-
-    genIcon() {
-      if (this.$slots.icon) {
+      if (slots.icon) {
         return (
           <div class={bem('icon')}>
-            {this.$slots.icon()}
-            <Badge dot={this.dot} badge={this.badge} />
+            {slots.icon()}
+            <Badge dot={dot} badge={badge} />
           </div>
         );
       }
 
       return (
         <Icon
-          class={[bem('icon'), this.iconClass]}
           tag="div"
-          dot={this.dot}
-          name={this.icon}
-          badge={this.badge}
-          color={this.color}
+          dot={dot}
+          name={icon}
+          badge={badge}
+          color={color}
+          class={[bem('icon'), iconClass]}
         />
       );
-    },
-  },
+    }
 
-  render() {
-    return (
-      <div role="button" tabindex="0" class={bem()} onClick={this.onClick}>
-        {this.genIcon()}
-        {this.$slots.default ? this.$slots.default() : this.text}
+    return (vm) => (
+      <div
+        role="button"
+        class={bem()}
+        tabindex="0"
+        onClick={() => {
+          route(vm.$router, vm);
+        }}
+      >
+        {genIcon()}
+        {slots.default ? slots.default() : props.text}
       </div>
     );
   },
diff --git a/src/action-bar/index.js b/src/action-bar/index.js
index 172215075..23c4843e0 100644
--- a/src/action-bar/index.js
+++ b/src/action-bar/index.js
@@ -13,10 +13,10 @@ export default createComponent({
     },
   },
 
-  render() {
-    return (
-      <div class={bem({ unfit: !this.safeAreaInsetBottom })}>
-        {this.$slots.default?.()}
+  setup(props, { slots }) {
+    return () => (
+      <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
+        {slots.default?.()}
       </div>
     );
   },