chore(Tabbar): use relation

src/composition/use-parent.ts

@@ -1,30 +0,0 @@
-import { inject, computed, onUnmounted } from 'vue';
-
-type Parent = { children: unknown[] };
-
-type Child<T> = T extends { children: (infer U)[] } ? U : never;
-
-export function useParent<P extends Parent>(
-  key: string,
-  child = {} as Child<P>
-) {
-  const parent = inject<P | null>(key, null);
-
-  if (parent) {
-    const { children } = parent;
-    const index = computed(() => children.indexOf(child));
-
-    children.push(child);
-
-    onUnmounted(() => {
-      children.splice(index.value, 1);
-    });
-
-    return {
-      index,
-      parent,
-    };
-  }
-
-  return {};
-}

src/tabbar-item/index.js

@@ -5,7 +5,7 @@ import { TABBAR_KEY } from '../tabbar';
 import { createNamespace, isObject, isDef } from '../utils';
 
 // Composition
-import { useParent } from '../composition/use-parent';
+import { useParent } from '../composition/use-relation';
 import { routeProps, useRoute } from '../composition/use-route';
 
 // Components

src/tabbar/index.js

@@ -1,7 +1,12 @@
-import { ref, reactive, provide } from 'vue';
+import { ref } from 'vue';
+
+// Utils
 import { createNamespace, isDef } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor } from '../utils/interceptor';
+
+// Composition
+import { useChildren } from '../composition/use-relation';
 import { usePlaceholder } from '../composition/use-placeholder';
 
 const [createComponent, bem] = createNamespace('tabbar');
@@ -38,7 +43,7 @@ export default createComponent({
 
   setup(props, { emit, slots }) {
     const root = ref();
-    const children = reactive([]);
+    const { linkChildren } = useChildren(TABBAR_KEY);
     const renderPlaceholder = usePlaceholder(root, bem);
 
     const isUnfit = () => {
@@ -76,11 +81,7 @@ export default createComponent({
       }
     };
 
-    provide(TABBAR_KEY, {
+    linkChildren({ props, setActive });
-      props,
-      children,
-      setActive,
-    });
 
     return () => {
       if (props.fixed && props.placeholder) {