diff --git a/src/action-bar-button/index.js b/src/action-bar-button/index.js
index 10b916748..744ce723c 100644
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@@ -3,7 +3,8 @@ import { createNamespace } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar';
 
 // Composition
-import { useParent } from '../composition/use-parent';
+import { useParent } from '../composition/use-relation';
+import { useExpose } from '../composition/use-expose';
 import { useRoute, routeProps } from '../composition/use-route';
 
 // Components
@@ -24,22 +25,24 @@ export default createComponent({
 
   setup(props, { slots }) {
     const route = useRoute();
-    const { parent, index } = useParent(ACTION_BAR_KEY, { isButton: true });
+    const { parent, index } = useParent(ACTION_BAR_KEY);
 
     const isFirst = computed(() => {
       if (parent) {
         const prev = parent.children[index.value - 1];
-        return !(prev && prev.isButton);
+        return !(prev && 'isButton' in prev);
       }
     });
 
     const isLast = computed(() => {
       if (parent) {
         const next = parent.children[index.value + 1];
-        return !(next && next.isButton);
+        return !(next && 'isButton' in next);
       }
     });
 
+    useExpose({ isButton: true });
+
     return () => {
       const { type, icon, text, color, loading, disabled } = props;
 
diff --git a/src/action-bar-icon/index.tsx b/src/action-bar-icon/index.tsx
index 68e18e74d..a36f110af 100644
--- a/src/action-bar-icon/index.tsx
+++ b/src/action-bar-icon/index.tsx
@@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar';
 
 // Composition
-import { useParent } from '../composition/use-parent';
+import { useParent } from '../composition/use-relation';
 import { useRoute, routeProps } from '../composition/use-route';
 
 // Components
diff --git a/src/action-bar/index.js b/src/action-bar/index.js
index ee4126af7..aaf0e44d4 100644
--- a/src/action-bar/index.js
+++ b/src/action-bar/index.js
@@ -1,5 +1,5 @@
-import { provide, reactive } from 'vue';
 import { createNamespace } from '../utils';
+import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('action-bar');
 
@@ -14,9 +14,9 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const children = reactive([]);
+    const { linkChildren } = useChildren(ACTION_BAR_KEY);
 
-    provide(ACTION_BAR_KEY, { children });
+    linkChildren();
 
     return () => (
       <div class={bem({ unfit: !props.safeAreaInsetBottom })}>