diff --git a/src/action-bar-button/index.js b/src/action-bar-button/index.js
index f145032ad..0c7cba926 100644
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@@ -1,13 +1,13 @@
+import { ref, computed } from 'vue';
 import { createNamespace } from '../utils';
 import { route, routeProps } from '../utils/router';
-import { ChildrenMixin } from '../mixins/relation';
+import { useChildren } from '../api/use-relation';
+import { ACTION_BAR_KEY } from '../action-bar';
 import Button from '../button';
 
 const [createComponent, bem] = createNamespace('action-bar-button');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanActionBar')],
-
   props: {
     ...routeProps,
     type: String,
@@ -19,23 +19,38 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
+    const { children, index } = useChildren(ACTION_BAR_KEY, ref(true));
+
+    const isFirst = computed(() => {
+      if (children) {
+        const prev = children.value[index.value - 1];
+        return !(prev && prev.value);
+      }
+    });
+
+    const isLast = computed(() => {
+      if (children) {
+        const next = children.value[index.value + 1];
+        return !(next && next.value);
+      }
+    });
+
     return (vm) => {
       const { type, icon, text, color, loading, disabled } = props;
 
-      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;
-
       const onClick = () => {
         route(vm.$router, vm);
       };
 
       return (
         <Button
-          class={bem([type, { last, first }])}
+          class={bem([
+            type,
+            {
+              last: isLast.value,
+              first: isFirst.value,
+            },
+          ])}
           size="large"
           type={type}
           icon={icon}
diff --git a/src/action-bar-icon/index.js b/src/action-bar-icon/index.js
index 170bebac0..82b7c1b8d 100644
--- a/src/action-bar-icon/index.js
+++ b/src/action-bar-icon/index.js
@@ -1,14 +1,14 @@
+import { ref } from 'vue';
 import { createNamespace } from '../utils';
 import { route, routeProps } from '../utils/router';
-import { ChildrenMixin } from '../mixins/relation';
+import { useChildren } from '../api/use-relation';
+import { ACTION_BAR_KEY } from '../action-bar';
 import Icon from '../icon';
 import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('action-bar-icon');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanActionBar')],
-
   props: {
     ...routeProps,
     dot: Boolean,
@@ -20,6 +20,8 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
+    useChildren(ACTION_BAR_KEY, ref());
+
     function genIcon() {
       const { dot, badge, icon, color, iconClass } = props;
 
diff --git a/src/action-bar/index.js b/src/action-bar/index.js
index 23c4843e0..1839dda5e 100644
--- a/src/action-bar/index.js
+++ b/src/action-bar/index.js
@@ -1,11 +1,11 @@
 import { createNamespace } from '../utils';
-import { ParentMixin } from '../mixins/relation';
+import { useParent } from '../api/use-relation';
 
 const [createComponent, bem] = createNamespace('action-bar');
 
-export default createComponent({
-  mixins: [ParentMixin('vanActionBar')],
+export const ACTION_BAR_KEY = 'vanActionBar';
 
+export default createComponent({
   props: {
     safeAreaInsetBottom: {
       type: Boolean,
@@ -14,6 +14,8 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
+    useParent(ACTION_BAR_KEY);
+
     return () => (
       <div class={bem({ unfit: !props.safeAreaInsetBottom })}>
         {slots.default?.()}
diff --git a/src/api/use-relation.ts b/src/api/use-relation.ts
index 106819b44..d078d7b81 100644
--- a/src/api/use-relation.ts
+++ b/src/api/use-relation.ts
@@ -16,7 +16,8 @@ export function useParent(key: string) {
 
 export function useChildren(key: string, child: unknown) {
   const parent = inject<Parent>(key, null);
-  const index = computed(() => parent?.children.value.indexOf(child));
+  const children = parent?.children;
+  const index = computed(() => children?.value.indexOf(child));
 
   if (parent) {
     parent.children.value.push(child);
@@ -24,6 +25,6 @@ export function useChildren(key: string, child: unknown) {
 
   return {
     index,
-    parent,
+    children,
   };
 }