types: improve relation types (#9016)

src/checkbox-group/CheckboxGroup.tsx

@@ -1,4 +1,10 @@
-import { PropType, watch, defineComponent, ExtractPropTypes } from 'vue';
+import {
+  watch,
+  PropType,
+  InjectionKey,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
@@ -7,8 +13,6 @@ import { CheckerParent, CheckerDirection } from '../checkbox/Checker';
 
 const [name, bem] = createNamespace('checkbox-group');
 
-export const CHECKBOX_GROUP_KEY = Symbol(name);
-
 const props = {
   max: [Number, String],
   disabled: Boolean,
@@ -33,6 +37,10 @@ export type CheckboxGroupProvide = CheckerParent & {
   updateValue: (value: unknown[]) => void;
 };
 
+export const CHECKBOX_GROUP_KEY: InjectionKey<CheckboxGroupProvide> = Symbol(
+  name
+);
+
 export default defineComponent({
   name,
 

src/checkbox/Checkbox.tsx

@@ -2,10 +2,7 @@ import { computed, watch, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, extend, pick, truthProp } from '../utils';
-import {
-  CHECKBOX_GROUP_KEY,
-  CheckboxGroupProvide,
-} from '../checkbox-group/CheckboxGroup';
+import { CHECKBOX_GROUP_KEY } from '../checkbox-group/CheckboxGroup';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -27,7 +24,7 @@ export default defineComponent({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const { parent } = useParent<CheckboxGroupProvide>(CHECKBOX_GROUP_KEY);
+    const { parent } = useParent(CHECKBOX_GROUP_KEY);
 
     const setParentValue = (checked: boolean) => {
       const { name } = props;

src/col/Col.tsx

@@ -1,7 +1,7 @@
 import { computed, PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { useParent } from '@vant/use';
-import { ROW_KEY, RowProvide } from '../row/Row';
+import { ROW_KEY } from '../row/Row';
 
 const [name, bem] = createNamespace('col');
 
@@ -21,7 +21,7 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
-    const { parent, index } = useParent<RowProvide>(ROW_KEY);
+    const { parent, index } = useParent(ROW_KEY);
 
     const style = computed(() => {
       if (!parent) {

src/collapse-item/CollapseItem.tsx

@@ -3,7 +3,7 @@ import { ref, watch, computed, nextTick, defineComponent } from 'vue';
 // Utils
 import { cellProps } from '../cell/Cell';
 import { createNamespace, extend, pick, truthProp } from '../utils';
-import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse';
+import { COLLAPSE_KEY } from '../collapse/Collapse';
 
 // Composables
 import { raf, doubleRaf, useParent } from '@vant/use';
@@ -30,7 +30,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const wrapperRef = ref<HTMLElement>();
     const contentRef = ref<HTMLElement>();
-    const { parent, index } = useParent<CollapseProvide>(COLLAPSE_KEY);
+    const { parent, index } = useParent(COLLAPSE_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {

src/collapse/Collapse.tsx

@@ -1,17 +1,17 @@
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, InjectionKey } from 'vue';
 import { truthProp, createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('collapse');
 
-export const COLLAPSE_KEY = Symbol(name);
-
 export type CollapseProvide = {
   toggle: (name: number | string, expanded: boolean) => void;
   isExpanded: (name: number | string) => boolean;
 };
 
+export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol(name);
+
 function validateModelValue(
   modelValue: string | number | Array<string | number>,
   accordion: boolean

src/composables/use-link-field.ts

@@ -1,7 +1,8 @@
 import { watch, inject, InjectionKey } from 'vue';
+import type { FormProvide } from '../form/Form';
 import type { FieldProvide } from '../field/types';
 
-export const FORM_KEY = Symbol('van-form');
+export const FORM_KEY: InjectionKey<FormProvide> = Symbol('van-form');
 export const FIELD_KEY: InjectionKey<FieldProvide> = Symbol('van-field');
 
 export function useLinkField(getValue: () => unknown) {

src/dropdown-item/DropdownItem.tsx

@@ -14,10 +14,7 @@ import {
   getZIndexStyle,
   createNamespace,
 } from '../utils';
-import {
-  DROPDOWN_KEY,
-  DropdownMenuProvide,
-} from '../dropdown-menu/DropdownMenu';
+import { DROPDOWN_KEY } from '../dropdown-menu/DropdownMenu';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -61,7 +58,7 @@ export default defineComponent({
       showWrapper: false,
     });
 
-    const { parent } = useParent<DropdownMenuProvide>(DROPDOWN_KEY);
+    const { parent } = useParent(DROPDOWN_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {

src/dropdown-menu/DropdownMenu.tsx

@@ -3,6 +3,7 @@ import {
   Ref,
   computed,
   PropType,
+  InjectionKey,
   CSSProperties,
   defineComponent,
   ExtractPropTypes,
@@ -22,8 +23,6 @@ import {
 
 const [name, bem] = createNamespace('dropdown-menu');
 
-export const DROPDOWN_KEY = Symbol(name);
-
 export type DropdownMenuDirection = 'up' | 'down';
 
 const props = {
@@ -47,6 +46,8 @@ export type DropdownMenuProvide = {
   offset: Ref<number>;
 };
 
+export const DROPDOWN_KEY: InjectionKey<DropdownMenuProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 
@@ -57,9 +58,7 @@ export default defineComponent({
     const barRef = ref<HTMLElement>();
     const offset = ref(0);
 
-    const { children, linkChildren } = useChildren<ComponentInstance>(
-      DROPDOWN_KEY
-    );
+    const { children, linkChildren } = useChildren(DROPDOWN_KEY);
     const scrollParent = useScrollParent(root);
 
     const opened = computed(() =>

src/field/Field.tsx

@@ -55,6 +55,16 @@ import type {
 
 const [name, bem] = createNamespace('field');
 
+// Shared props of Field and Form
+type SharedProps =
+  | 'colon'
+  | 'disabled'
+  | 'readonly'
+  | 'labelWidth'
+  | 'labelAlign'
+  | 'inputAlign'
+  | 'errorMessageAlign';
+
 // provide to Search component to inherit
 export const fieldProps = {
   formatter: Function as PropType<(value: string) => string>,
@@ -141,11 +151,11 @@ export default defineComponent({
     const inputRef = ref<HTMLInputElement>();
     const childFieldValue = ref<() => unknown>();
 
-    const { parent: form } = useParent<any>(FORM_KEY);
+    const { parent: form } = useParent(FORM_KEY);
 
     const getModelValue = () => String(props.modelValue ?? '');
 
-    const getProp = (key: keyof typeof props) => {
+    const getProp = <T extends SharedProps>(key: T) => {
       if (isDef(props[key])) {
         return props[key];
       }

src/form/Form.tsx

@@ -1,7 +1,7 @@
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, ExtractPropTypes } from 'vue';
 
 // Utils
-import { truthProp, createNamespace, ComponentInstance } from '../utils';
+import { truthProp, createNamespace } from '../utils';
 
 // Composables
 import { useChildren } from '@vant/use';
@@ -17,32 +17,38 @@ import type {
 
 const [name, bem] = createNamespace('form');
 
+const props = {
+  colon: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+  showError: Boolean,
+  labelWidth: [Number, String],
+  labelAlign: String as PropType<FieldTextAlign>,
+  inputAlign: String as PropType<FieldTextAlign>,
+  scrollToError: Boolean,
+  validateFirst: Boolean,
+  submitOnEnter: truthProp,
+  showErrorMessage: truthProp,
+  errorMessageAlign: String as PropType<FieldTextAlign>,
+  validateTrigger: {
+    type: String as PropType<FieldValidateTrigger>,
+    default: 'onBlur',
+  },
+};
+
+export type FormProvide = {
+  props: ExtractPropTypes<typeof props>;
+};
+
 export default defineComponent({
   name,
 
-  props: {
-    colon: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
-    showError: Boolean,
-    labelWidth: [Number, String],
-    labelAlign: String as PropType<FieldTextAlign>,
-    inputAlign: String as PropType<FieldTextAlign>,
-    scrollToError: Boolean,
-    validateFirst: Boolean,
-    submitOnEnter: truthProp,
-    showErrorMessage: truthProp,
-    errorMessageAlign: String as PropType<FieldTextAlign>,
-    validateTrigger: {
-      type: String as PropType<FieldValidateTrigger>,
-      default: 'onBlur',
-    },
-  },
+  props,
 
   emits: ['submit', 'failed'],
 
   setup(props, { emit, slots }) {
-    const { children, linkChildren } = useChildren<ComponentInstance>(FORM_KEY);
+    const { children, linkChildren } = useChildren(FORM_KEY);
 
     const getFieldsByNames = (names?: string[]) => {
       if (names) {

src/grid-item/GridItem.tsx

@@ -3,7 +3,7 @@ import { computed, CSSProperties, defineComponent } from 'vue';
 // Utils
 import { createNamespace, addUnit, extend } from '../utils';
 import { BORDER } from '../utils/constant';
-import { GRID_KEY, GridProvide } from '../grid/Grid';
+import { GRID_KEY } from '../grid/Grid';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -28,7 +28,7 @@ export default defineComponent({
   }),
 
   setup(props, { slots }) {
-    const { parent, index } = useParent<GridProvide>(GRID_KEY);
+    const { parent, index } = useParent(GRID_KEY);
     const route = useRoute();
 
     if (!parent) {
@@ -113,8 +113,15 @@ export default defineComponent({
     };
 
     return () => {
-      const { center, border, square, gutter, reverse, direction, clickable } =
-        parent.props;
+      const {
+        center,
+        border,
+        square,
+        gutter,
+        reverse,
+        direction,
+        clickable,
+      } = parent.props;
 
       const classes = [
         bem('content', [

src/grid/Grid.tsx

@@ -1,12 +1,10 @@
-import { PropType, defineComponent, ExtractPropTypes } from 'vue';
+import { PropType, defineComponent, ExtractPropTypes, InjectionKey } from 'vue';
 import { createNamespace, addUnit, truthProp } from '../utils';
 import { BORDER_TOP } from '../utils/constant';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('grid');
 
-export const GRID_KEY = Symbol(name);
-
 export type GridDirection = 'horizontal' | 'vertical';
 
 const props = {
@@ -28,6 +26,8 @@ export type GridProvide = {
   props: ExtractPropTypes<typeof props>;
 };
 
+export const GRID_KEY: InjectionKey<GridProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 

src/index-anchor/IndexAnchor.tsx

@@ -3,7 +3,7 @@ import { ref, reactive, computed, CSSProperties, defineComponent } from 'vue';
 // Utils
 import { createNamespace, extend, getZIndexStyle } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
-import { INDEX_BAR_KEY, IndexBarProvide } from '../index-bar/IndexBar';
+import { INDEX_BAR_KEY } from '../index-bar/IndexBar';
 import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
 
 // Composables
@@ -29,7 +29,7 @@ export default defineComponent({
     });
 
     const root = ref<HTMLElement>();
-    const { parent } = useParent<IndexBarProvide>(INDEX_BAR_KEY);
+    const { parent } = useParent(INDEX_BAR_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {

src/index-bar/IndexBar.tsx

@@ -6,6 +6,7 @@ import {
   PropType,
   Teleport,
   onMounted,
+  InjectionKey,
   CSSProperties,
   TeleportProps,
   defineComponent,
@@ -22,7 +23,6 @@ import {
   createNamespace,
   getRootScrollTop,
   setRootScrollTop,
-  ComponentInstance,
 } from '../utils';
 
 // Composables
@@ -46,8 +46,6 @@ function genAlphabet() {
 
 const [name, bem] = createNamespace('index-bar');
 
-export const INDEX_BAR_KEY = Symbol(name);
-
 const props = {
   sticky: truthProp,
   zIndex: [Number, String],
@@ -67,6 +65,8 @@ export type IndexBarProvide = {
   props: ExtractPropTypes<typeof props>;
 };
 
+export const INDEX_BAR_KEY: InjectionKey<IndexBarProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 
@@ -80,9 +80,7 @@ export default defineComponent({
 
     const touch = useTouch();
     const scrollParent = useScrollParent(root);
-    const { children, linkChildren } = useChildren<ComponentInstance>(
-      INDEX_BAR_KEY
-    );
+    const { children, linkChildren } = useChildren(INDEX_BAR_KEY);
 
     linkChildren({ props });
 

src/picker/Picker.tsx

@@ -7,7 +7,6 @@ import {
   truthProp,
   preventDefault,
   createNamespace,
-  ComponentInstance,
 } from '../utils';
 import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
 
@@ -114,9 +113,7 @@ export default defineComponent({
       props.columnsFieldNames
     );
 
-    const { children, linkChildren } = useChildren<ComponentInstance>(
-      PICKER_KEY
-    );
+    const { children, linkChildren } = useChildren(PICKER_KEY);
 
     linkChildren();
 

src/radio-group/RadioGroup.tsx

@@ -1,26 +1,32 @@
-import { watch, defineComponent, ExtractPropTypes } from 'vue';
+import {
+  watch,
+  PropType,
+  InjectionKey,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 import { unknownProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useLinkField } from '../composables/use-link-field';
-import { CheckerParent } from '../checkbox/Checker';
+import type { CheckerDirection } from '../checkbox/Checker';
 
 const [name, bem] = createNamespace('radio-group');
 
-export const RADIO_KEY = Symbol(name);
-
 const props = {
   disabled: Boolean,
   iconSize: [Number, String],
-  direction: String,
+  direction: String as PropType<CheckerDirection>,
   modelValue: unknownProp,
   checkedColor: String,
 };
 
-export type RadioGroupProvide = CheckerParent & {
+export type RadioGroupProvide = {
   props: ExtractPropTypes<typeof props>;
   updateValue: (value: unknown) => void;
 };
 
+export const RADIO_KEY: InjectionKey<RadioGroupProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 

src/radio/Radio.tsx

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 
 // Utils
 import { pick, createNamespace } from '../utils';
-import { RADIO_KEY, RadioGroupProvide } from '../radio-group/RadioGroup';
+import { RADIO_KEY } from '../radio-group/RadioGroup';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -20,7 +20,7 @@ export default defineComponent({
   emits: ['update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const { parent } = useParent<RadioGroupProvide>(RADIO_KEY);
+    const { parent } = useParent(RADIO_KEY);
 
     const checked = () => {
       const value = parent ? parent.props.modelValue : props.modelValue;

src/row/Row.tsx

@@ -1,17 +1,23 @@
-import { computed, PropType, ComputedRef, defineComponent } from 'vue';
-import { truthProp, createNamespace, ComponentInstance } from '../utils';
+import {
+  computed,
+  PropType,
+  ComputedRef,
+  InjectionKey,
+  defineComponent,
+} from 'vue';
+import { truthProp, createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('row');
 
-export const ROW_KEY = Symbol(name);
-
 export type RowSpaces = { left?: number; right: number }[];
 
 export type RowProvide = {
   spaces: ComputedRef<RowSpaces>;
 };
 
+export const ROW_KEY: InjectionKey<RowProvide> = Symbol(name);
+
 export type RowAlign = 'top' | 'center' | 'bottom';
 
 export type RowJustify =
@@ -39,7 +45,7 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
-    const { children, linkChildren } = useChildren<ComponentInstance>(ROW_KEY);
+    const { children, linkChildren } = useChildren(ROW_KEY);
 
     const groups = computed(() => {
       const groups: number[][] = [[]];

src/sidebar-item/SidebarItem.tsx

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, extend } from '../utils';
-import { SIDEBAR_KEY, SidebarProvide } from '../sidebar/Sidebar';
+import { SIDEBAR_KEY } from '../sidebar/Sidebar';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -27,7 +27,7 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const route = useRoute();
-    const { parent, index } = useParent<SidebarProvide>(SIDEBAR_KEY);
+    const { parent, index } = useParent(SIDEBAR_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {

src/sidebar/Sidebar.tsx

@@ -1,16 +1,16 @@
-import { defineComponent } from 'vue';
+import { defineComponent, InjectionKey } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('sidebar');
 
-export const SIDEBAR_KEY = Symbol(name);
-
 export type SidebarProvide = {
   getActive: () => number;
   setActive: (value: number) => void;
 };
 
+export const SIDEBAR_KEY: InjectionKey<SidebarProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 

src/step/Step.tsx

@@ -3,7 +3,7 @@ import { computed, defineComponent } from 'vue';
 // Utils
 import { createNamespace } from '../utils';
 import { BORDER } from '../utils/constant';
-import { STEPS_KEY, StepsProvide } from '../steps/Steps';
+import { STEPS_KEY } from '../steps/Steps';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -17,7 +17,7 @@ export default defineComponent({
   name,
 
   setup(props, { slots }) {
-    const { parent, index } = useParent<StepsProvide>(STEPS_KEY);
+    const { parent, index } = useParent(STEPS_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {

src/steps/Steps.tsx

@@ -1,11 +1,9 @@
-import { PropType, defineComponent, ExtractPropTypes } from 'vue';
+import { PropType, defineComponent, ExtractPropTypes, InjectionKey } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
 const [name, bem] = createNamespace('steps');
 
-export const STEPS_KEY = Symbol(name);
-
 export type StepsDirection = 'horizontal' | 'vertical';
 
 const props = {
@@ -33,6 +31,8 @@ export type StepsProvide = {
   onClickStep: (index: number) => void;
 };
 
+export const STEPS_KEY: InjectionKey<StepsProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 

src/swipe-item/SwipeItem.tsx

@@ -9,7 +9,7 @@ import {
 
 // Utils
 import { createNamespace } from '../utils';
-import { SWIPE_KEY, SwipeProvide } from '../swipe/Swipe';
+import { SWIPE_KEY } from '../swipe/Swipe';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -28,7 +28,7 @@ export default defineComponent({
       mounted: false,
     });
 
-    const { parent, index } = useParent<SwipeProvide>(SWIPE_KEY);
+    const { parent, index } = useParent(SWIPE_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {

src/swipe/Swipe.tsx

@@ -6,6 +6,7 @@ import {
   onMounted,
   ComputedRef,
   onActivated,
+  InjectionKey,
   CSSProperties,
   onDeactivated,
   onBeforeUnmount,
@@ -20,7 +21,6 @@ import {
   truthProp,
   preventDefault,
   createNamespace,
-  ComponentInstance,
 } from '../utils';
 
 // Composables
@@ -36,8 +36,6 @@ import { onPopupReopen } from '../composables/on-popup-reopen';
 
 const [name, bem] = createNamespace('swipe');
 
-export const SWIPE_KEY = Symbol(name);
-
 const props = {
   loop: truthProp,
   width: [Number, String],
@@ -73,6 +71,8 @@ export type SwipeProvide = {
   activeIndicator: ComputedRef<number>;
 };
 
+export const SWIPE_KEY: InjectionKey<SwipeProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 
@@ -93,8 +93,7 @@ export default defineComponent({
 
     const touch = useTouch();
     const windowSize = useWindowSize();
-    const { children, linkChildren } =
-      useChildren<ComponentInstance>(SWIPE_KEY);
+    const { children, linkChildren } = useChildren(SWIPE_KEY);
 
     const count = computed(() => children.length);
 

src/tab/Tab.tsx

@@ -11,7 +11,7 @@ import {
 
 // Utils
 import { createNamespace, extend, unknownProp } from '../utils';
-import { TABS_KEY, TabsProvide } from '../tabs/Tabs';
+import { TABS_KEY } from '../tabs/Tabs';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -38,7 +38,7 @@ export default defineComponent({
 
   setup(props, { slots }) {
     const inited = ref(false);
-    const { parent, index } = useParent<TabsProvide>(TABS_KEY);
+    const { parent, index } = useParent(TABS_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {

src/tabbar-item/TabbarItem.tsx

@@ -2,7 +2,7 @@ import { computed, getCurrentInstance, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, extend, isObject } from '../utils';
-import { TABBAR_KEY, TabbarProvide } from '../tabbar/Tabbar';
+import { TABBAR_KEY } from '../tabbar/Tabbar';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -30,7 +30,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const route = useRoute();
     const vm = getCurrentInstance()!.proxy!;
-    const { parent, index } = useParent<TabbarProvide>(TABBAR_KEY);
+    const { parent, index } = useParent(TABBAR_KEY);
 
     if (!parent) {
       if (process.env.NODE_ENV !== 'production') {

src/tabbar/Tabbar.tsx

@@ -1,4 +1,10 @@
-import { ref, PropType, defineComponent, ExtractPropTypes } from 'vue';
+import {
+  ref,
+  PropType,
+  InjectionKey,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import { truthProp, createNamespace, getZIndexStyle } from '../utils';
@@ -11,8 +17,6 @@ import { usePlaceholder } from '../composables/use-placeholder';
 
 const [name, bem] = createNamespace('tabbar');
 
-export const TABBAR_KEY = Symbol(name);
-
 const props = {
   route: Boolean,
   fixed: truthProp,
@@ -37,6 +41,8 @@ export type TabbarProvide = {
   setActive: (active: number | string) => void;
 };
 
+export const TABBAR_KEY: InjectionKey<TabbarProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 

src/tabs/Tabs.tsx

@@ -7,6 +7,7 @@ import {
   PropType,
   ComputedRef,
   onActivated,
+  InjectionKey,
   CSSProperties,
   defineComponent,
   ExtractPropTypes,
@@ -51,8 +52,6 @@ import TabsContent from './TabsContent';
 
 const [name, bem] = createNamespace('tabs');
 
-export const TABS_KEY = Symbol(name);
-
 export type TabsType = 'line' | 'card';
 
 const props = {
@@ -100,6 +99,8 @@ export type TabsProvide = {
   currentName: ComputedRef<number | string | undefined>;
 };
 
+export const TABS_KEY: InjectionKey<TabsProvide> = Symbol(name);
+
 export default defineComponent({
   name,
 
@@ -119,7 +120,7 @@ export default defineComponent({
     const windowSize = useWindowSize();
     const scroller = useScrollParent(root);
     const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>();
-    const { children, linkChildren } = useChildren<ComponentInstance>(TABS_KEY);
+    const { children, linkChildren } = useChildren(TABS_KEY);
 
     const state = reactive({
       inited: false,