diff --git a/package.json b/package.json
index 73a62fc8b..50e3b54af 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
   "dependencies": {
     "@babel/runtime": "7.x",
     "@vant/icons": "1.3.0",
-    "@vant/use": "^0.0.2",
+    "@vant/use": "^0.0.3",
     "vue-lazyload": "1.2.3"
   },
   "peerDependencies": {
diff --git a/src/action-bar-button/index.js b/src/action-bar-button/index.js
index 744ce723c..07e8bd325 100644
--- a/src/action-bar-button/index.js
+++ b/src/action-bar-button/index.js
@@ -3,7 +3,7 @@ import { createNamespace } from '../utils';
 import { ACTION_BAR_KEY } from '../action-bar';
 
 // Composition
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
 import { useRoute, routeProps } from '../composition/use-route';
 
diff --git a/src/action-bar-icon/index.tsx b/src/action-bar-icon/index.tsx
index a36f110af..8dc03cc94 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-relation';
+import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composition/use-route';
 
 // Components
diff --git a/src/action-bar/index.js b/src/action-bar/index.js
index aaf0e44d4..e3e631052 100644
--- a/src/action-bar/index.js
+++ b/src/action-bar/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('action-bar');
 
diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js
index 893dac5ce..639dce5c4 100644
--- a/src/checkbox-group/index.js
+++ b/src/checkbox-group/index.js
@@ -1,8 +1,8 @@
 import { watch } from 'vue';
 import { createNamespace } from '../utils';
 import { CHECKBOX_KEY } from '../checkbox';
+import { useChildren } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 import { useLinkField } from '../composition/use-link-field';
 
 const [createComponent, bem] = createNamespace('checkbox-group');
diff --git a/src/checkbox/index.js b/src/checkbox/index.js
index 834c97406..1dc3fc5bf 100644
--- a/src/checkbox/index.js
+++ b/src/checkbox/index.js
@@ -1,8 +1,8 @@
 import { computed, watch } from 'vue';
 import { createNamespace, pick } from '../utils';
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
 import { useLinkField } from '../composition/use-link-field';
-import { useParent } from '../composition/use-relation';
 import Checker, { checkerProps } from './Checker';
 
 const [createComponent, bem] = createNamespace('checkbox');
diff --git a/src/col/index.tsx b/src/col/index.tsx
index abdf1dd65..8a445f4fe 100644
--- a/src/col/index.tsx
+++ b/src/col/index.tsx
@@ -1,6 +1,6 @@
 import { computed, PropType } from 'vue';
 import { createNamespace } from '../utils';
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { ROW_KEY, RowProvide } from '../row';
 
 const [createComponent, bem] = createNamespace('col');
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index fae66a2de..a05ab88fb 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -4,7 +4,7 @@ import { ref, watch, computed, nextTick } from 'vue';
 import { raf, doubleRaf, createNamespace } from '../utils';
 
 // Composition
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useLazyRender } from '../composition/use-lazy-render';
 
 // Components
diff --git a/src/collapse/index.js b/src/collapse/index.js
index d0a9dd234..35fff2527 100644
--- a/src/collapse/index.js
+++ b/src/collapse/index.js
@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('collapse');
 
diff --git a/src/composition/use-relation.ts b/src/composition/use-relation.ts
deleted file mode 100644
index 01e70d635..000000000
--- a/src/composition/use-relation.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import {
-  VNode,
-  inject,
-  isVNode,
-  provide,
-  computed,
-  reactive,
-  onUnmounted,
-  getCurrentInstance,
-  VNodeNormalizedChildren,
-  ComponentPublicInstance as PublicInstance,
-  ComponentInternalInstance as InternalInstance,
-} from 'vue';
-
-export function flattenVNodes(children: VNodeNormalizedChildren) {
-  const result: VNode[] = [];
-
-  const traverse = (children: VNodeNormalizedChildren) => {
-    if (Array.isArray(children)) {
-      children.forEach((child) => {
-        if (isVNode(child)) {
-          result.push(child);
-
-          if (child.component?.subTree) {
-            traverse(child.component.subTree.children);
-          }
-
-          if (child.children) {
-            traverse(child.children);
-          }
-        }
-      });
-    }
-  };
-
-  traverse(children);
-
-  return result;
-}
-
-// sort children instances by vnodes order
-export function sortChildren(
-  parent: InternalInstance,
-  publicChildren: PublicInstance[],
-  internalChildren: InternalInstance[]
-) {
-  const vnodes = flattenVNodes(parent.subTree.children);
-
-  internalChildren.sort(
-    (a, b) => vnodes.indexOf(a.vnode) - vnodes.indexOf(b.vnode)
-  );
-
-  const orderedPublicChildren = internalChildren.map((item) => item.proxy!);
-
-  publicChildren.sort((a, b) => {
-    const indexA = orderedPublicChildren.indexOf(a);
-    const indexB = orderedPublicChildren.indexOf(b);
-    return indexA - indexB;
-  });
-}
-
-export function useChildren(key: string) {
-  const publicChildren: PublicInstance[] = reactive([]);
-  const internalChildren: InternalInstance[] = reactive([]);
-  const parent = getCurrentInstance()!;
-
-  const linkChildren = (value: any) => {
-    const link = (child: InternalInstance) => {
-      if (child.proxy) {
-        internalChildren.push(child);
-        publicChildren.push(child.proxy);
-        sortChildren(parent, publicChildren, internalChildren);
-      }
-    };
-
-    const unlink = (child: InternalInstance) => {
-      const index = internalChildren.indexOf(child);
-      publicChildren.splice(index, 1);
-      internalChildren.splice(index, 1);
-    };
-
-    provide(key, {
-      link,
-      unlink,
-      children: publicChildren,
-      internalChildren,
-      ...value,
-    });
-  };
-
-  return {
-    children: publicChildren,
-    linkChildren,
-  };
-}
-
-type ParentProvide<T> = T & {
-  link(child: InternalInstance): void;
-  unlink(child: InternalInstance): void;
-  children: PublicInstance[];
-  internalChildren: InternalInstance[];
-};
-
-export function useParent<T>(key: string) {
-  const parent = inject<ParentProvide<T> | null>(key, null);
-
-  if (parent) {
-    const instance = getCurrentInstance();
-
-    if (instance) {
-      const { link, unlink, internalChildren, ...rest } = parent;
-
-      link(instance);
-
-      onUnmounted(() => {
-        unlink(instance);
-      });
-
-      const index = computed(() => internalChildren.indexOf(instance));
-
-      return {
-        parent: rest,
-        index,
-      };
-    }
-  }
-
-  return {};
-}
diff --git a/src/dropdown-item/index.js b/src/dropdown-item/index.js
index a230be9db..9ae780908 100644
--- a/src/dropdown-item/index.js
+++ b/src/dropdown-item/index.js
@@ -5,8 +5,8 @@ import { createNamespace } from '../utils';
 import { DROPDOWN_KEY } from '../dropdown-menu';
 
 // Composition
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 // Components
 import Cell from '../cell';
diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
index e9b47b842..57ffc290c 100644
--- a/src/dropdown-menu/index.js
+++ b/src/dropdown-menu/index.js
@@ -4,9 +4,13 @@ import { ref, computed } from 'vue';
 import { createNamespace, isDef } from '../utils';
 
 // Composition
-import { useClickAway, useScrollParent, useEventListener } from '@vant/use';
+import {
+  useChildren,
+  useClickAway,
+  useScrollParent,
+  useEventListener,
+} from '@vant/use';
 import { useRect } from '../composition/use-rect';
-import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('dropdown-menu');
 
diff --git a/src/field/index.js b/src/field/index.js
index 8878c7140..23b06bcf9 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -23,8 +23,8 @@ import {
 } from '../utils';
 
 // Composition
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 // Components
 import Icon from '../icon';
diff --git a/src/form/index.js b/src/form/index.js
index c19fd7941..1ac4e8421 100644
--- a/src/form/index.js
+++ b/src/form/index.js
@@ -1,6 +1,6 @@
 import { createNamespace } from '../utils';
+import { useChildren } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('form');
 
diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index d98585982..4ff882c63 100644
--- a/src/grid-item/index.js
+++ b/src/grid-item/index.js
@@ -6,7 +6,7 @@ import { BORDER } from '../utils/constant';
 import { GRID_KEY } from '../grid';
 
 // Composition
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composition/use-route';
 
 // Components
diff --git a/src/grid/index.js b/src/grid/index.js
index 49b9794d0..51218100e 100644
--- a/src/grid/index.js
+++ b/src/grid/index.js
@@ -1,6 +1,6 @@
 import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP } from '../utils/constant';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('grid');
 
diff --git a/src/index-anchor/index.js b/src/index-anchor/index.js
index fa7dbf16b..5a16c0404 100644
--- a/src/index-anchor/index.js
+++ b/src/index-anchor/index.js
@@ -6,9 +6,9 @@ import { BORDER_BOTTOM } from '../utils/constant';
 import { INDEX_BAR_KEY } from '../index-bar';
 
 // Composition
+import { useParent } from '@vant/use';
 import { useHeight } from '../composition/use-rect';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('index-anchor');
 
diff --git a/src/index-bar/index.js b/src/index-bar/index.js
index bc03a8f88..f4aa08996 100644
--- a/src/index-bar/index.js
+++ b/src/index-bar/index.js
@@ -13,10 +13,9 @@ import {
 } from '../utils';
 
 // Composition
-import { useScrollParent, useEventListener } from '@vant/use';
+import { useChildren, 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';
 
diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js
index 407e8d743..697d4b47e 100644
--- a/src/picker/PickerColumn.js
+++ b/src/picker/PickerColumn.js
@@ -6,9 +6,9 @@ import { deepClone } from '../utils/deep-clone';
 import { range, isObject, createNamespace, preventDefault } from '../utils';
 
 // Composition
+import { useParent } from '@vant/use';
 import { useTouch } from '../composition/use-touch';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 const DEFAULT_DURATION = 200;
 
diff --git a/src/picker/index.js b/src/picker/index.js
index f68c0bc9e..43e6b7e86 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -6,8 +6,8 @@ import { unitToPx, preventDefault, createNamespace } from '../utils';
 import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
 
 // Composition
+import { useChildren } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 
 // Components
 import Loading from '../loading';
diff --git a/src/radio-group/index.js b/src/radio-group/index.js
index cb30d240b..31565faca 100644
--- a/src/radio-group/index.js
+++ b/src/radio-group/index.js
@@ -1,6 +1,6 @@
 import { watch } from 'vue';
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 import { useLinkField } from '../composition/use-link-field';
 
 const [createComponent, bem] = createNamespace('radio-group');
diff --git a/src/radio/index.js b/src/radio/index.js
index 43e6c8273..90d84bb51 100644
--- a/src/radio/index.js
+++ b/src/radio/index.js
@@ -1,5 +1,5 @@
 import { pick, createNamespace } from '../utils';
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import Checker, { checkerProps } from '../checkbox/Checker';
 import { RADIO_KEY } from '../radio-group';
 
diff --git a/src/row/index.tsx b/src/row/index.tsx
index a97c328a5..0d29e8d00 100644
--- a/src/row/index.tsx
+++ b/src/row/index.tsx
@@ -1,6 +1,6 @@
 import { computed, PropType, ComputedRef } from 'vue';
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('row');
 
diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index 502291a09..de033c5f6 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composition/use-route';
 import { SIDEBAR_KEY } from '../sidebar';
 import Badge from '../badge';
diff --git a/src/sidebar/index.js b/src/sidebar/index.js
index bc5cb955f..e949277a1 100644
--- a/src/sidebar/index.js
+++ b/src/sidebar/index.js
@@ -1,6 +1,6 @@
 import { watch } from 'vue';
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('sidebar');
 
diff --git a/src/step/index.js b/src/step/index.js
index 346bcd8ea..941632d8e 100644
--- a/src/step/index.js
+++ b/src/step/index.js
@@ -2,7 +2,7 @@ import { computed } from 'vue';
 import { createNamespace } from '../utils';
 import { BORDER } from '../utils/constant';
 import { STEPS_KEY } from '../steps';
-import { useParent } from '../composition/use-relation';
+import { useParent } from '@vant/use';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('step');
diff --git a/src/steps/index.js b/src/steps/index.js
index 0fc6f6a3f..a22f91646 100644
--- a/src/steps/index.js
+++ b/src/steps/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 
 const [createComponent, bem] = createNamespace('steps');
 
diff --git a/src/swipe-item/index.js b/src/swipe-item/index.js
index 780ead33d..7776fbf2f 100644
--- a/src/swipe-item/index.js
+++ b/src/swipe-item/index.js
@@ -1,8 +1,8 @@
 import { computed, nextTick, onMounted, reactive } from 'vue';
 import { SWIPE_KEY } from '../swipe';
 import { createNamespace } from '../utils';
+import { useParent } from '@vant/use';
 import { useExpose } from '../composition/use-expose';
-import { useParent } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('swipe-item');
 
diff --git a/src/swipe/index.js b/src/swipe/index.js
index 24ae589e8..46bb2e6bb 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -19,11 +19,10 @@ import {
 } from '../utils';
 
 // Composition
-import { usePageVisibility, useWindowSize } from '@vant/use';
+import { useChildren, useWindowSize, usePageVisibility } from '@vant/use';
 import { useRect } from '../composition/use-rect';
 import { useTouch } from '../composition/use-touch';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('swipe');
 
diff --git a/src/tab/index.js b/src/tab/index.js
index 87de18f9a..a10a29152 100644
--- a/src/tab/index.js
+++ b/src/tab/index.js
@@ -3,8 +3,8 @@ import { createNamespace } from '../utils';
 import { TABS_KEY } from '../tabs';
 
 // Composition
+import { useParent } from '@vant/use';
 import { routeProps } from '../composition/use-route';
-import { useParent } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('tab');
 
diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index 9a88a9b49..6d8331996 100644
--- a/src/tabbar-item/index.js
+++ b/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-relation';
+import { useParent } from '@vant/use';
 import { routeProps, useRoute } from '../composition/use-route';
 
 // Components
diff --git a/src/tabbar/index.js b/src/tabbar/index.js
index e18bdcafc..51ad9f410 100644
--- a/src/tabbar/index.js
+++ b/src/tabbar/index.js
@@ -6,7 +6,7 @@ import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor } from '../utils/interceptor';
 
 // Composition
-import { useChildren } from '../composition/use-relation';
+import { useChildren } from '@vant/use';
 import { usePlaceholder } from '../composition/use-placeholder';
 
 const [createComponent, bem] = createNamespace('tabbar');
diff --git a/src/tabs/index.js b/src/tabs/index.js
index 9aac35608..ff90b6933 100644
--- a/src/tabs/index.js
+++ b/src/tabs/index.js
@@ -25,11 +25,15 @@ import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor } from '../utils/interceptor';
 
 // Composition
-import { useWindowSize, useScrollParent, useEventListener } from '@vant/use';
+import {
+  useChildren,
+  useWindowSize,
+  useScrollParent,
+  useEventListener,
+} from '@vant/use';
 import { route } from '../composition/use-route';
 import { useRefs } from '../composition/use-refs';
 import { useExpose } from '../composition/use-expose';
-import { useChildren } from '../composition/use-relation';
 
 // Components
 import Sticky from '../sticky';
diff --git a/yarn.lock b/yarn.lock
index 9348bea70..d7f239423 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2175,10 +2175,10 @@
   resolved "https://registry.yarnpkg.com/@vant/touch-emulator/-/touch-emulator-1.2.0.tgz#486300b23e57db9ce9231a04e0a0c621c68692d8"
   integrity sha512-sJ97zU85zOq51qoi7+CpBEcOyH3CitjP1KC7/GQwqaurUJni+EP7/F9n0HMnAh8GXMjgtgDBNJ5z48x+coNKYQ==
 
-"@vant/use@^0.0.2":
-  version "0.0.2"
-  resolved "https://registry.npmjs.org/@vant/use/-/use-0.0.2.tgz#9ea72642e0d6ef664f19e80b73fdb59b9f403d21"
-  integrity sha512-kPgqwBMKaeKPQ/LZjjVDHKxo2Thi4w5M186+Yg4jATW7qCcfd0CujDmqlETfFjBCbw40C1HVu/kmhXE0cQPPUg==
+"@vant/use@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.npmjs.org/@vant/use/-/use-0.0.3.tgz#e3043830206344442a22d302d556c2e36b492eb5"
+  integrity sha512-7B7tmc8OqkNlMsNzZrIBy2hE8pBvQexBdE74+xr8/HtLhFbVkiZeO+YsOmgYTrsnSEvACBreoIkFX2tjRjzdMw==
 
 "@vue/babel-helper-vue-transform-on@^1.0.0-rc.2":
   version "1.0.0-rc.2"