chore(IndexBar): use relation

src/index-anchor/index.js

@@ -7,7 +7,8 @@ import { INDEX_BAR_KEY } from '../index-bar';
 
 // Composition
 import { useHeight } from '../composition/use-rect';
-import { useParent } from '../composition/use-parent';
+import { useExpose } from '../composition/use-expose';
+import { useParent } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('index-anchor');
 
@@ -26,13 +27,7 @@ export default createComponent({
 
     const root = ref();
     const height = useHeight(root);
-
+    const { parent } = useParent(INDEX_BAR_KEY);
-    const { parent } = useParent(INDEX_BAR_KEY, {
-      props,
-      state,
-      height,
-      root,
-    });
 
     const isSticky = () => state.active && parent.props.sticky;
 
@@ -50,6 +45,11 @@ export default createComponent({
       }
     });
 
+    useExpose({
+      state,
+      height,
+    });
+
     return () => {
       const sticky = isSticky();
 

src/index-bar/index.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick, reactive, provide } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 
 // Utils
 import { createNamespace, isDef } from '../utils';
@@ -15,6 +15,7 @@ import {
 import { useScrollParent, useEventListener } from '@vant/use';
 import { useRect } from '../composition/use-rect';
 import { useTouch } from '../composition/use-touch';
+import { useChildren } from '../composition/use-relation';
 
 export const INDEX_BAR_KEY = 'vanIndexBar';
 
@@ -54,12 +55,12 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const root = ref();
     const activeAnchor = ref();
-    const children = reactive([]);
 
     const touch = useTouch();
     const scrollParent = useScrollParent(root);
+    const { children, linkChildren } = useChildren(INDEX_BAR_KEY);
 
-    provide(INDEX_BAR_KEY, { props, children });
+    linkChildren({ props });
 
     const sidebarStyle = computed(() => {
       if (isDef(props.zIndex)) {
@@ -122,8 +123,8 @@ export default createComponent({
       const scrollParentRect = getScrollerRect();
 
       const rects = children.map((item) => ({
-        height: item.height,
+        height: item.height.value,
-        top: getAnchorTop(item.root, scrollParentRect),
+        top: getAnchorTop(item.$el, scrollParentRect),
       }));
 
       const active = getActiveAnchor(scrollTop, rects);
@@ -132,9 +133,9 @@ export default createComponent({
 
       if (sticky) {
         children.forEach((item, index) => {
-          const { state, height, root } = item;
+          const { state, height, $el } = item;
           if (index === active || index === active - 1) {
-            const rect = root.getBoundingClientRect();
+            const rect = $el.getBoundingClientRect();
             state.left = rect.left;
             state.width = rect.width;
           } else {
@@ -150,7 +151,7 @@ export default createComponent({
           } else if (index === active - 1) {
             const activeItemTop = rects[active].top - scrollTop;
             state.active = activeItemTop > 0;
-            state.top = activeItemTop + scrollParentRect.top - height;
+            state.top = activeItemTop + scrollParentRect.top - height.value;
           } else {
             state.active = false;
           }
@@ -187,12 +188,10 @@ export default createComponent({
         return;
       }
 
-      const match = children.filter(
+      const match = children.filter((item) => String(item.index) === index);
-        (item) => String(item.props.index) === index
-      );
 
       if (match[0]) {
-        match[0].root.scrollIntoView();
+        match[0].$el.scrollIntoView();
 
         if (props.sticky && props.stickyOffsetTop) {
           setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);