refactor: reorganize all components (#8303)

src/action-bar-button/ActionBarButton.tsx

@@ -1,6 +1,6 @@
-import { computed, PropType } from 'vue';
+import { computed, PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
-import { ACTION_BAR_KEY } from '../action-bar';
+import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -10,9 +10,11 @@ import { useRoute, routeProps } from '../composables/use-route';
 // Components
 import Button, { ButtonType } from '../button';
 
-const [createComponent, bem] = createNamespace('action-bar-button');
+const [name, bem] = createNamespace('action-bar-button');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...routeProps,
     type: String as PropType<ButtonType>,

src/action-bar-button/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _ActionBarButton from './ActionBarButton';
+
+const ActionBarButton = installable(_ActionBarButton);
+
+export default ActionBarButton;
+export { ActionBarButton };

src/action-bar-icon/ActionBarIcon.tsx

@@ -1,5 +1,6 @@
+import { defineComponent } from 'vue';
 import { createNamespace, UnknownProp } from '../utils';
-import { ACTION_BAR_KEY } from '../action-bar';
+import { ACTION_BAR_KEY } from '../action-bar/ActionBar';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -9,9 +10,11 @@ import { useRoute, routeProps } from '../composables/use-route';
 import Icon from '../icon';
 import Badge from '../badge';
 
-const [createComponent, bem] = createNamespace('action-bar-icon');
+const [name, bem] = createNamespace('action-bar-icon');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...routeProps,
     dot: Boolean,

src/action-bar-icon/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _ActionBarIcon from './ActionBarIcon';
+
+const ActionBarIcon = installable(_ActionBarIcon);
+
+export default ActionBarIcon;
+export { ActionBarIcon };

src/action-bar/ActionBar.tsx

@@ -1,11 +1,14 @@
+import { defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
-const [createComponent, bem] = createNamespace('action-bar');
+const [name, bem] = createNamespace('action-bar');
 
-export const ACTION_BAR_KEY = Symbol('ActionBar');
+export const ACTION_BAR_KEY = Symbol(name);
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     safeAreaInsetBottom: {
       type: Boolean,

src/action-bar/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _ActionBar from './ActionBar';
+
+const ActionBar = installable(_ActionBar);
+
+export default ActionBar;
+export { ActionBar };

src/action-sheet/ActionSheet.tsx

@@ -1,4 +1,4 @@
-import { nextTick, PropType } from 'vue';
+import { nextTick, PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, pick } from '../utils';
@@ -9,7 +9,7 @@ import Popup from '../popup';
 import Loading from '../loading';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
-const [createComponent, bem] = createNamespace('action-sheet');
+const [name, bem] = createNamespace('action-sheet');
 
 export type ActionSheetAction = {
   name?: string;
@@ -21,7 +21,9 @@ export type ActionSheetAction = {
   className?: unknown;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...popupSharedProps,
     title: String,

src/action-sheet/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _ActionSheet from './ActionSheet';
+
+const ActionSheet = installable(_ActionSheet);
+
+export default ActionSheet;
+export { ActionSheet };
+export type { ActionSheetAction } from './ActionSheet';

src/address-edit/AddressEdit.tsx

@@ -1,4 +1,12 @@
-import { ref, watch, computed, nextTick, reactive, PropType } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  reactive,
+  PropType,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { ComponentInstance, createNamespace, isObject } from '../utils';
@@ -16,11 +24,11 @@ import Toast from '../toast';
 import Button from '../button';
 import Dialog from '../dialog';
 import Switch from '../switch';
-import Detail, { AddressEditSearchItem } from './Detail';
+import AddressEditDetail, { AddressEditSearchItem } from './AddressEditDetail';
 
-const [createComponent, bem, t] = createNamespace('address-edit');
+const [name, bem, t] = createNamespace('address-edit');
 
-export type AddressInfo = {
+export type AddressEditInfo = {
   tel: string;
   name: string;
   city: string;
@@ -33,7 +41,7 @@ export type AddressInfo = {
   addressDetail: string;
 };
 
-const defaultData: AddressInfo = {
+const defaultData: AddressEditInfo = {
   name: '',
   tel: '',
   city: '',
@@ -50,7 +58,9 @@ function isPostal(value: string) {
   return /^\d{6}$/.test(value);
 }
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     areaList: Object as PropType<AreaList>,
     isSaving: Boolean,
@@ -85,7 +95,7 @@ export default createComponent({
       default: 200,
     },
     addressInfo: {
-      type: Object as PropType<Partial<AddressInfo>>,
+      type: Object as PropType<Partial<AddressEditInfo>>,
       default: () => ({ ...defaultData }),
     },
     telValidator: {
@@ -118,7 +128,7 @@ export default createComponent({
     const areaRef = ref<ComponentInstance>();
 
     const state = reactive({
-      data: {} as AddressInfo,
+      data: {} as AddressEditInfo,
       showAreaPopup: false,
       detailFocused: false,
       errorInfo: {
@@ -359,7 +369,7 @@ export default createComponent({
                 state.showAreaPopup = !disableArea;
               }}
             />
-            <Detail
+            <AddressEditDetail
               show={props.showDetail}
               value={data.addressDetail}
               focused={state.detailFocused}

src/address-edit/AddressEditDetail.tsx

@@ -1,4 +1,4 @@
-import { PropType, ref } from 'vue';
+import { PropType, ref, defineComponent } from 'vue';
 
 // Utils
 import { ComponentInstance, createNamespace } from '../utils';
@@ -8,7 +8,7 @@ import { isAndroid } from '../utils/validate/system';
 import Cell from '../cell';
 import Field from '../field';
 
-const [createComponent, bem, t] = createNamespace('address-edit-detail');
+const [name, bem, t] = createNamespace('address-edit-detail');
 const android = isAndroid();
 
 export type AddressEditSearchItem = {
@@ -16,7 +16,9 @@ export type AddressEditSearchItem = {
   address: string;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     show: Boolean,
     value: String,

src/address-edit/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _AddressEdit from './AddressEdit';
+
+const AddressEdit = installable(_AddressEdit);
+
+export default AddressEdit;
+export { AddressEdit };

src/address-list/AddressList.tsx

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -6,22 +6,24 @@ import { createNamespace } from '../utils';
 // Components
 import Button from '../button';
 import RadioGroup from '../radio-group';
-import AddressItem, { AddressListItem } from './Item';
+import AddressListItem, { AddressListAddress } from './AddressListItem';
 
-const [createComponent, bem, t] = createNamespace('address-list');
+const [name, bem, t] = createNamespace('address-list');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     modelValue: [Number, String],
     disabledText: String,
     addButtonText: String,
     defaultTagText: String,
     list: {
-      type: Array as PropType<AddressListItem[]>,
+      type: Array as PropType<AddressListAddress[]>,
       default: () => [],
     },
     disabledList: {
-      type: Array as PropType<AddressListItem[]>,
+      type: Array as PropType<AddressListAddress[]>,
       default: () => [],
     },
     switchable: {
@@ -42,7 +44,7 @@ export default createComponent({
 
   setup(props, { slots, emit }) {
     const renderItem = (
-      item: AddressListItem,
+      item: AddressListAddress,
       index: number,
       disabled?: boolean
     ) => {
@@ -63,7 +65,7 @@ export default createComponent({
       };
 
       return (
-        <AddressItem
+        <AddressListItem
           v-slots={{
             bottom: slots['item-bottom'],
           }}
@@ -79,7 +81,7 @@ export default createComponent({
       );
     };
 
-    const renderList = (list: AddressListItem[], disabled?: boolean) => {
+    const renderList = (list: AddressListAddress[], disabled?: boolean) => {
       if (list) {
         return list.map((item, index) => renderItem(item, index, disabled));
       }

src/address-list/AddressListItem.tsx

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -9,9 +9,9 @@ import Icon from '../icon';
 import Cell from '../cell';
 import Radio from '../radio';
 
-const [createComponent, bem] = createNamespace('address-item');
+const [name, bem] = createNamespace('address-item');
 
-export type AddressListItem = {
+export type AddressListAddress = {
   id: number | string;
   tel: number | string;
   name: string;
@@ -19,13 +19,15 @@ export type AddressListItem = {
   isDefault?: boolean;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     disabled: Boolean,
     switchable: Boolean,
     defaultTagText: String,
     address: {
-      type: Object as PropType<AddressListItem>,
+      type: Object as PropType<AddressListAddress>,
       required: true,
     },
   },

src/address-list/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _AddressList from './AddressList';
+
+const AddressList = installable(_AddressList);
+
+export default AddressList;
+export { AddressList };

src/area/Area.tsx

@@ -7,19 +7,21 @@ import {
   nextTick,
   PropType,
   onMounted,
+  defineComponent,
 } from 'vue';
 
 // Utils
 import { deepClone } from '../utils/deep-clone';
 import { pick, createNamespace, ComponentInstance } from '../utils';
+import { pickerProps } from '../picker/Picker';
 
 // Composables
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import Picker, { pickerProps } from '../picker';
+import Picker from '../picker';
 
-const [createComponent, bem] = createNamespace('area');
+const [name, bem] = createNamespace('area');
 
 const EMPTY_CODE = '000000';
 
@@ -40,7 +42,9 @@ export type AreaColumnOption = {
 
 type ColumnType = 'province' | 'county' | 'city';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...pickerProps,
     value: String,

src/area/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _Area from './Area';
+
+const Area = installable(_Area);
+
+export default Area;
+export { Area };
+export type { AreaList, AreaColumnOption } from './Area';

src/badge/Badge.tsx

@@ -1,10 +1,12 @@
-import type { PropType, CSSProperties } from 'vue';
+import { PropType, CSSProperties, defineComponent } from 'vue';
 import { isDef, createNamespace } from '../utils';
 import { isNumeric } from '../utils/validate/number';
 
-const [createComponent, bem] = createNamespace('badge');
+const [name, bem] = createNamespace('badge');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     dot: Boolean,
     max: [Number, String],

src/badge/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Badge from './Badge';
+
+const Badge = installable(_Badge);
+
+export default Badge;
+export { Badge };

src/button/Button.tsx

@@ -1,4 +1,9 @@
-import { PropType, CSSProperties, ButtonHTMLAttributes } from 'vue';
+import {
+  PropType,
+  CSSProperties,
+  ButtonHTMLAttributes,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -9,7 +14,7 @@ import { useRoute, routeProps } from '../composables/use-route';
 import Icon from '../icon';
 import Loading, { LoadingType } from '../loading';
 
-const [createComponent, bem] = createNamespace('button');
+const [name, bem] = createNamespace('button');
 
 export type ButtonType =
   | 'default'
@@ -20,7 +25,9 @@ export type ButtonType =
 
 export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...routeProps,
     text: String,

src/button/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _Button from './Button';
+
+const Button = installable(_Button);
+
+export default Button;
+export { Button };
+export type { ButtonType, ButtonSize } from './Button';

src/calendar/Calendar.tsx

@@ -1,4 +1,12 @@
-import { ref, watch, reactive, computed, PropType, TeleportProps } from 'vue';
+import {
+  ref,
+  watch,
+  reactive,
+  computed,
+  PropType,
+  TeleportProps,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { pick, getScrollTop, ComponentInstance } from '../utils';
@@ -6,6 +14,7 @@ import { isDate } from '../utils/validate/date';
 import {
   t,
   bem,
+  name,
   copyDate,
   copyDates,
   getPrevDay,
@@ -13,7 +22,6 @@ import {
   compareDay,
   calcDateNum,
   compareMonth,
-  createComponent,
   getDayByOffset,
 } from './utils';
 
@@ -26,20 +34,22 @@ import { useExpose } from '../composables/use-expose';
 import Popup, { PopupPosition } from '../popup';
 import Button from '../button';
 import Toast from '../toast';
-import Month, { CalendarType } from './components/Month';
+import CalendarMonth, { CalendarType } from './CalendarMonth';
-import Header from './components/Header';
+import CalendarHeader from './CalendarHeader';
 
 // Types
-import type { DayItem } from './components/Day';
+import type { CalendarDayItem } from './CalendarDay';
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     show: Boolean,
     title: String,
     color: String,
     readonly: Boolean,
     teleport: [String, Object] as PropType<TeleportProps['to']>,
-    formatter: Function as PropType<(item: DayItem) => DayItem>,
+    formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
     rowHeight: [Number, String],
     confirmText: String,
     rangePrompt: String,
@@ -364,7 +374,7 @@ export default createComponent({
       }
     };
 
-    const onClickDay = (item: DayItem) => {
+    const onClickDay = (item: CalendarDayItem) => {
       if (props.readonly || !item.date) {
         return;
       }
@@ -429,7 +439,7 @@ export default createComponent({
     const renderMonth = (date: Date, index: number) => {
       const showMonthTitle = index !== 0 || !props.showSubtitle;
       return (
-        <Month
+        <CalendarMonth
           ref={setMonthRefs(index)}
           date={date}
           currentDate={state.currentDate}
@@ -487,7 +497,7 @@ export default createComponent({
 
     const renderCalendar = () => (
       <div class={bem()}>
-        <Header
+        <CalendarHeader
           v-slots={{ title: slots.title }}
           title={props.title}
           showTitle={props.showTitle}

src/calendar/CalendarDay.tsx

@@ -1,10 +1,10 @@
-import { computed, CSSProperties, PropType } from 'vue';
+import { computed, CSSProperties, PropType, defineComponent } from 'vue';
-import { createNamespace } from '../../utils';
+import { createNamespace } from '../utils';
-import { bem } from '../utils';
+import { bem } from './utils';
 
-const [createComponent] = createNamespace('calendar-day');
+const [name] = createNamespace('calendar-day');
 
-export type DayType =
+export type CalendarDayType =
   | ''
   | 'start'
   | 'start-end'
@@ -16,16 +16,18 @@ export type DayType =
   | 'disabled'
   | 'placeholder';
 
-export type DayItem = {
+export type CalendarDayItem = {
   date?: Date;
   text?: string | number;
-  type?: DayType;
+  type?: CalendarDayType;
   topInfo?: string;
   className?: unknown;
   bottomInfo?: string;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     color: String,
     index: Number,
@@ -35,7 +37,7 @@ export default createComponent({
       default: 0,
     },
     item: {
-      type: Object as PropType<DayItem>,
+      type: Object as PropType<CalendarDayItem>,
       required: true,
     },
   },

src/calendar/CalendarHeader.tsx

@@ -1,9 +1,12 @@
-import { createNamespace } from '../../utils';
+import { defineComponent } from 'vue';
-import { t, bem } from '../utils';
+import { createNamespace } from '../utils';
+import { t, bem } from './utils';
 
-const [createComponent] = createNamespace('calendar-header');
+const [name] = createNamespace('calendar-header');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     title: String,
     subtitle: String,

src/calendar/CalendarMonth.tsx

@@ -1,8 +1,8 @@
-import { ref, computed, PropType } from 'vue';
+import { ref, computed, PropType, defineComponent } from 'vue';
 
 // Utils
-import { addUnit, setScrollTop, createNamespace } from '../../utils';
+import { addUnit, setScrollTop, createNamespace } from '../utils';
-import { getMonthEndDay } from '../../datetime-picker/utils';
+import { getMonthEndDay } from '../datetime-picker/utils';
 import {
   t,
   bem,
@@ -10,27 +10,29 @@ import {
   getPrevDay,
   getNextDay,
   formatMonthTitle,
-} from '../utils';
+} from './utils';
 
 // Composables
 import { useToggle } from '@vant/use';
-import { useExpose } from '../../composables/use-expose';
+import { useExpose } from '../composables/use-expose';
-import { useHeight } from '../../composables/use-height';
+import { useHeight } from '../composables/use-height';
 
 // Components
-import Day, { DayItem, DayType } from './Day';
+import CalendarDay, { CalendarDayItem, CalendarDayType } from './CalendarDay';
 
-const [createComponent] = createNamespace('calendar-month');
+const [name] = createNamespace('calendar-month');
 
 export type CalendarType = 'single' | 'range' | 'multiple';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     type: String as PropType<CalendarType>,
     color: String,
     showMark: Boolean,
     rowHeight: [Number, String],
-    formatter: Function as PropType<(item: DayItem) => DayItem>,
+    formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>,
     lazyRender: Boolean,
     currentDate: [Date, Array] as PropType<Date | Date[]>,
     allowSameDay: Boolean,
@@ -147,7 +149,7 @@ export default createComponent({
       return '';
     };
 
-    const getDayType = (day: Date): DayType => {
+    const getDayType = (day: Date): CalendarDayType => {
       const { type, minDate, maxDate, currentDate } = props;
 
       if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
@@ -172,7 +174,7 @@ export default createComponent({
       return '';
     };
 
-    const getBottomInfo = (dayType: DayType) => {
+    const getBottomInfo = (dayType: CalendarDayType) => {
       if (props.type === 'range') {
         if (dayType === 'start' || dayType === 'end') {
           return t(dayType);
@@ -195,13 +197,13 @@ export default createComponent({
       }
     };
 
-    const placeholders = computed<DayItem[]>(() => {
+    const placeholders = computed<CalendarDayItem[]>(() => {
       const count = Math.ceil((totalDay.value + offset.value) / 7);
       return Array(count).fill({ type: 'placeholder' });
     });
 
     const days = computed(() => {
-      const days: DayItem[] = [];
+      const days: CalendarDayItem[] = [];
       const year = props.date.getFullYear();
       const month = props.date.getMonth();
 
@@ -209,7 +211,7 @@ export default createComponent({
         const date = new Date(year, month, day);
         const type = getDayType(date);
 
-        let config: DayItem = {
+        let config: CalendarDayItem = {
           date,
           type,
           text: day,
@@ -226,8 +228,8 @@ export default createComponent({
       return days;
     });
 
-    const renderDay = (item: DayItem, index: number) => (
+    const renderDay = (item: CalendarDayItem, index: number) => (
-      <Day
+      <CalendarDay
         item={item}
         index={index}
         color={props.color}

src/calendar/demo/index.vue

@@ -122,7 +122,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { DayItem } from '../components/Day';
+import { CalendarDayItem } from '../CalendarDay';
 
 const i18n = {
   'zh-CN': {
@@ -223,7 +223,7 @@ export default {
       state.firstDayOfWeek = 0;
     };
 
-    const dayFormatter = (day: DayItem) => {
+    const dayFormatter = (day: CalendarDayItem) => {
       if (!day.date) {
         return day;
       }

src/calendar/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Calendar from './Calendar';
+
+const Calendar = installable(_Calendar);
+
+export default Calendar;
+export { Calendar };

src/calendar/utils.ts

@@ -1,8 +1,8 @@
 import { createNamespace } from '../utils';
 
-const [createComponent, bem, t] = createNamespace('calendar');
+const [name, bem, t] = createNamespace('calendar');
 
-export { createComponent, bem, t };
+export { name, bem, t };
 
 export function formatMonthTitle(date: Date) {
   return t('monthTitle', date.getFullYear(), date.getMonth() + 1);

src/card/Card.tsx

@@ -1,3 +1,5 @@
+import { defineComponent } from 'vue';
+
 // Utils
 import { createNamespace, isDef } from '../utils';
 
@@ -5,9 +7,11 @@ import { createNamespace, isDef } from '../utils';
 import Tag from '../tag';
 import Image from '../image';
 
-const [createComponent, bem] = createNamespace('card');
+const [name, bem] = createNamespace('card');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     tag: String,
     num: [Number, String],

src/card/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Card from './Card';
+
+const Card = installable(_Card);
+
+export default Card;
+export { Card };

src/cascader/Cascader.tsx

@@ -1,4 +1,4 @@
-import { nextTick, PropType, reactive, watch } from 'vue';
+import { nextTick, PropType, reactive, watch, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
 // Components
@@ -6,7 +6,7 @@ import Tab from '../tab';
 import Tabs from '../tabs';
 import Icon from '../icon';
 
-const [createComponent, bem, t] = createNamespace('cascader');
+const [name, bem, t] = createNamespace('cascader');
 
 export type CascaderOption = {
   text?: string;
@@ -27,7 +27,9 @@ type CascaderFieldNames = {
   children?: string;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     title: String,
     modelValue: [Number, String],

src/cascader/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _Cascader from './Cascader';
+
+const Cascader = installable(_Cascader);
+
+export default Cascader;
+export { Cascader };
+export type { CascaderOption } from './Cascader';

src/cascader/test/index.spec.ts

@@ -1,5 +1,5 @@
 import Cascader from '..';
-import { mount , later } from '../../../test';
+import { mount, later } from '../../../test';
 
 import options from '../demo/area-en-US';
 

src/cell-group/CellGroup.tsx

@@ -1,9 +1,12 @@
+import { defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
-const [createComponent, bem] = createNamespace('cell-group');
+const [name, bem] = createNamespace('cell-group');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   inheritAttrs: false,
 
   props: {

src/cell-group/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _CellGroup from './CellGroup';
+
+const CellGroup = installable(_CellGroup);
+
+export default CellGroup;
+export { CellGroup };

src/cell/Cell.tsx

@@ -1,4 +1,4 @@
-import { PropType, CSSProperties } from 'vue';
+import { PropType, CSSProperties, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, isDef, UnknownProp } from '../utils';
@@ -9,7 +9,7 @@ import { useRoute, routeProps } from '../composables/use-route';
 // Components
 import Icon from '../icon';
 
-const [createComponent, bem] = createNamespace('cell');
+const [name, bem] = createNamespace('cell');
 
 export type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
 
@@ -38,7 +38,9 @@ export const cellProps = {
   },
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...cellProps,
     ...routeProps,

src/cell/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Cell from './Cell';
+
+const Cell = installable(_Cell);
+
+export default Cell;
+export { Cell };

src/checkbox-group/CheckboxGroup.tsx

@@ -1,13 +1,13 @@
-import { PropType, watch } from 'vue';
+import { PropType, watch, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 import { useLinkField } from '../composables/use-link-field';
 import { CheckerParent, CheckerDirection } from '../checkbox/Checker';
 
-const [createComponent, bem] = createNamespace('checkbox-group');
+const [name, bem] = createNamespace('checkbox-group');
 
-export const CHECKBOX_GROUP_KEY = Symbol('CheckboxGroup');
+export const CHECKBOX_GROUP_KEY = Symbol(name);
 
 export type CheckboxGroupToggleAllOptions =
   | boolean
@@ -24,7 +24,9 @@ export type CheckboxGroupProvide = CheckerParent & {
   updateValue: (value: unknown[]) => void;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     max: [Number, String],
     disabled: Boolean,

src/checkbox-group/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _CheckboxGroup from './CheckboxGroup';
+
+const CheckboxGroup = installable(_CheckboxGroup);
+
+export default CheckboxGroup;
+export { CheckboxGroup };
+export type { CheckboxGroupToggleAllOptions } from './CheckboxGroup';

src/checkbox/Checkbox.tsx

@@ -1,8 +1,11 @@
-import { computed, watch } from 'vue';
+import { computed, watch, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, pick } from '../utils';
-import { CHECKBOX_GROUP_KEY, CheckboxGroupProvide } from '../checkbox-group';
+import {
+  CHECKBOX_GROUP_KEY,
+  CheckboxGroupProvide,
+} from '../checkbox-group/CheckboxGroup';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -12,9 +15,11 @@ import { useLinkField } from '../composables/use-link-field';
 // Components
 import Checker, { checkerProps } from './Checker';
 
-const [createComponent, bem] = createNamespace('checkbox');
+const [name, bem] = createNamespace('checkbox');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...checkerProps,
     bindGroup: {

src/checkbox/Checker.tsx

@@ -1,4 +1,4 @@
-import { ref, computed, defineComponent, PropType } from 'vue';
+import { ref, computed, PropType, defineComponent } from 'vue';
 import { addUnit, UnknownProp } from '../utils';
 import Icon from '../icon';
 

src/checkbox/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Checkbox from './Checkbox';
+
+const Checkbox = installable(_Checkbox);
+
+export default Checkbox;
+export { Checkbox };

src/circle/Circle.tsx

@@ -1,8 +1,8 @@
-import { watch, computed, PropType, CSSProperties } from 'vue';
+import { watch, computed, PropType, CSSProperties, defineComponent } from 'vue';
 import { raf, cancelRaf } from '@vant/use';
 import { isObject, getSizeStyle, createNamespace } from '../utils';
 
-const [createComponent, bem] = createNamespace('circle');
+const [name, bem] = createNamespace('circle');
 
 let uid = 0;
 
@@ -17,7 +17,9 @@ function getPath(clockwise: boolean, viewBoxSize: number) {
   } m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
 }
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     text: String,
     size: [Number, String],

src/circle/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Circle from './Circle';
+
+const Circle = installable(_Circle);
+
+export default Circle;
+export { Circle };

src/col/Col.tsx

@@ -1,11 +1,13 @@
-import { computed, PropType } from 'vue';
+import { computed, PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { useParent } from '@vant/use';
-import { ROW_KEY, RowProvide } from '../row';
+import { ROW_KEY, RowProvide } from '../row/Row';
 
-const [createComponent, bem] = createNamespace('col');
+const [name, bem] = createNamespace('col');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     offset: [Number, String],
     tag: {

src/col/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Col from './Col';
+
+const Col = installable(_Col);
+
+export default Col;
+export { Col };

src/collapse-item/CollapseItem.tsx

@@ -1,7 +1,9 @@
-import { ref, watch, computed, nextTick } from 'vue';
+import { ref, watch, computed, nextTick, defineComponent } from 'vue';
 
 // Utils
+import { cellProps } from '../cell/Cell';
 import { createNamespace } from '../utils';
+import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse';
 
 // Composables
 import { raf, doubleRaf, useParent } from '@vant/use';
@@ -9,12 +11,13 @@ import { useExpose } from '../composables/use-expose';
 import { useLazyRender } from '../composables/use-lazy-render';
 
 // Components
-import Cell, { cellProps } from '../cell';
+import Cell from '../cell';
-import { COLLAPSE_KEY, CollapseProvide } from '../collapse';
 
-const [createComponent, bem] = createNamespace('collapse-item');
+const [name, bem] = createNamespace('collapse-item');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...cellProps,
     name: [Number, String],

src/collapse-item/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _CollapseItem from './CollapseItem';
+
+const CollapseItem = installable(_CollapseItem);
+
+export default CollapseItem;
+export { CollapseItem };

src/collapse/Collapse.tsx

@@ -1,18 +1,20 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { useChildren } from '@vant/use';
 
-const [createComponent, bem] = createNamespace('collapse');
+const [name, bem] = createNamespace('collapse');
 
-export const COLLAPSE_KEY = Symbol('Collapse');
+export const COLLAPSE_KEY = Symbol(name);
 
 export type CollapseProvide = {
   toggle: (name: number | string, expanded: boolean) => void;
   isExpanded: (name: number | string) => boolean;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     accordion: Boolean,
     modelValue: {

src/collapse/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Collapse from './Collapse';
+
+const Collapse = installable(_Collapse);
+
+export default Collapse;
+export { Collapse };

src/composables/use-link-field.ts

@@ -1,8 +1,8 @@
 import { ComponentInstance } from '../utils';
 import { watch, inject } from 'vue';
 
-export const FORM_KEY = Symbol('Form');
+export const FORM_KEY = Symbol('van-form');
-export const FIELD_KEY = Symbol('Field');
+export const FIELD_KEY = Symbol('van-field');
 
 export function useLinkField(getValue: () => unknown) {
   const field = inject(FIELD_KEY, null) as ComponentInstance | null;

src/composables/use-placeholder.tsx

@@ -1,5 +1,5 @@
+import { Ref } from 'vue';
 import { useHeight } from './use-height';
-import type { Ref } from 'vue';
 import type { BEM } from '../utils/create/bem';
 
 export function usePlaceholder(contentRef: Ref<Element | undefined>, bem: BEM) {

src/contact-card/ContactCard.tsx

@@ -1,12 +1,14 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 import Cell from '../cell';
 
-const [createComponent, bem, t] = createNamespace('contact-card');
+const [name, bem, t] = createNamespace('contact-card');
 
 export type ContactCardType = 'add' | 'edit';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     tel: String,
     name: String,

src/contact-card/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _ContactCard from './ContactCard';
+
+const ContactCard = installable(_ContactCard);
+
+export default ContactCard;
+export { ContactCard };

src/contact-edit/ContactEdit.tsx

@@ -1,4 +1,4 @@
-import { watch, reactive, PropType } from 'vue';
+import { watch, reactive, PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -12,20 +12,22 @@ import Button from '../button';
 import Dialog from '../dialog';
 import Switch from '../switch';
 
-const [createComponent, bem, t] = createNamespace('contact-edit');
+const [name, bem, t] = createNamespace('contact-edit');
 
-export type ContactInfo = {
+export type ContactEditInfo = {
   tel: string;
   name: string;
   isDefault?: boolean;
 };
 
-const DEFAULT_CONTACT: ContactInfo = {
+const DEFAULT_CONTACT: ContactEditInfo = {
   tel: '',
   name: '',
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     isEdit: Boolean,
     isSaving: Boolean,
@@ -33,7 +35,7 @@ export default createComponent({
     showSetDefault: Boolean,
     setDefaultLabel: String,
     contactInfo: {
-      type: Object as PropType<ContactInfo>,
+      type: Object as PropType<ContactEditInfo>,
       default: () => ({ ...DEFAULT_CONTACT }),
     },
     telValidator: {

src/contact-edit/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _ContactEdit from './ContactEdit';
+
+const ContactEdit = installable(_ContactEdit);
+
+export default ContactEdit;
+export { ContactEdit };
+export type { ContactEditInfo } from './ContactEdit';

src/contact-edit/test/index.spec.ts

@@ -1,5 +1,5 @@
 import { VueWrapper } from '@vue/test-utils';
-import ContactEdit, { ContactInfo } from '..';
+import ContactEdit, { ContactEditInfo } from '..';
 import { mount, later } from '../../../test';
 
 const contactInfo = {
@@ -49,14 +49,18 @@ test('should emit save event after submitting form', async () => {
   });
 
   await submitForm(wrapper);
-  expect(wrapper.emitted<[ContactInfo]>('save')![0][0]).toEqual(contactInfo);
+  expect(wrapper.emitted<[ContactEditInfo]>('save')![0][0]).toEqual(
+    contactInfo
+  );
 });
 
 test('should watch contact info', async () => {
   const wrapper = mount(ContactEdit);
   await wrapper.setProps({ contactInfo });
   await submitForm(wrapper);
-  expect(wrapper.emitted<[ContactInfo]>('save')![0][0]).toEqual(contactInfo);
+  expect(wrapper.emitted<[ContactEditInfo]>('save')![0][0]).toEqual(
+    contactInfo
+  );
 });
 
 test('should allow deleting contact', async () => {

src/contact-list/ContactList.tsx

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, UnknownProp } from '../utils';
@@ -12,7 +12,7 @@ import Radio from '../radio';
 import Button from '../button';
 import RadioGroup from '../radio-group';
 
-const [createComponent, bem, t] = createNamespace('contact-list');
+const [name, bem, t] = createNamespace('contact-list');
 
 export type ContactListItem = {
   id?: number | string;
@@ -21,7 +21,9 @@ export type ContactListItem = {
   isDefault?: boolean;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     list: Array as PropType<ContactListItem[]>,
     addText: String,

src/contact-list/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _ContactList from './ContactList';
+
+const ContactList = installable(_ContactList);
+
+export default ContactList;
+export { ContactList };

src/count-down/CountDown.tsx

@@ -1,4 +1,4 @@
-import { watch, computed } from 'vue';
+import { watch, computed, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -8,9 +8,11 @@ import { parseFormat } from './utils';
 import { useCountDown } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
-const [createComponent, bem] = createNamespace('count-down');
+const [name, bem] = createNamespace('count-down');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     millisecond: Boolean,
     time: {

src/count-down/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _CountDown from './CountDown';
+
+const CountDown = installable(_CountDown);
+
+export default CountDown;
+export { CountDown };

src/coupon-cell/CouponCell.tsx

@@ -1,11 +1,11 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { isDef, createNamespace } from '../utils';
 import type { CouponInfo } from '../coupon';
 
 // Components
 import Cell from '../cell';
 
-const [createComponent, bem, t] = createNamespace('coupon-cell');
+const [name, bem, t] = createNamespace('coupon-cell');
 
 function formatValue(
   coupons: CouponInfo[],
@@ -29,7 +29,9 @@ function formatValue(
   return coupons.length === 0 ? t('tips') : t('count', coupons.length);
 }
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     title: String,
     coupons: {

src/coupon-cell/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _CouponCell from './CouponCell';
+
+const CouponCell = installable(_CouponCell);
+
+export default CouponCell;
+export { CouponCell };

src/coupon-list/CouponList.tsx

@@ -1,4 +1,12 @@
-import { watch, computed, nextTick, reactive, PropType, onMounted } from 'vue';
+import {
+  watch,
+  computed,
+  nextTick,
+  reactive,
+  PropType,
+  onMounted,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -14,10 +22,12 @@ import Field from '../field';
 import Button from '../button';
 import Coupon, { CouponInfo } from '../coupon';
 
-const [createComponent, bem, t] = createNamespace('coupon-list');
+const [name, bem, t] = createNamespace('coupon-list');
 const EMPTY_IMAGE = 'https://img01.yzcdn.cn/vant/coupon-empty.png';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     enabledTitle: String,
     disabledTitle: String,

src/coupon-list/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _CouponList from './CouponList';
+
+const CouponList = installable(_CouponList);
+
+export default CouponList;
+export { CouponList };

src/coupon/Coupon.tsx

@@ -1,4 +1,4 @@
-import { computed, PropType } from 'vue';
+import { computed, PropType, defineComponent } from 'vue';
 import { padZero, createNamespace } from '../utils';
 import { RED } from '../utils/constant';
 import Checkbox from '../checkbox';
@@ -19,7 +19,7 @@ export type CouponInfo = {
   originCondition?: number;
 };
 
-const [createComponent, bem, t] = createNamespace('coupon');
+const [name, bem, t] = createNamespace('coupon');
 
 function getDate(timeStamp: number) {
   const date = new Date(timeStamp * 1000);
@@ -38,7 +38,9 @@ function formatAmount(amount: number) {
   );
 }
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     chosen: Boolean,
     disabled: Boolean,

src/coupon/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _Coupon from './Coupon';
+
+const Coupon = installable(_Coupon);
+
+export default Coupon;
+export { Coupon };
+export type { CouponInfo } from './Coupon';

src/datetime-picker/DatePicker.tsx

@@ -1,4 +1,12 @@
-import { ref, watch, computed, nextTick, onMounted, PropType } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  onMounted,
+  PropType,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { isDate } from '../utils/validate/date';
@@ -26,9 +34,11 @@ import { useExpose } from '../composables/use-expose';
 import Picker from '../picker';
 
 const currentYear = new Date().getFullYear();
-const [createComponent] = createNamespace('date-picker');
+const [name] = createNamespace('date-picker');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...sharedProps,
     modelValue: Date,

src/datetime-picker/DatetimePicker.tsx

@@ -1,15 +1,17 @@
-import { ref } from 'vue';
+import { ref, defineComponent } from 'vue';
 import { pick, createNamespace, ComponentInstance } from '../utils';
 import { useExpose } from '../composables/use-expose';
 import TimePicker from './TimePicker';
 import DatePicker from './DatePicker';
 
-const [createComponent, bem] = createNamespace('datetime-picker');
+const [name, bem] = createNamespace('datetime-picker');
 
 const timePickerProps = Object.keys(TimePicker.props);
 const datePickerProps = Object.keys(DatePicker.props);
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...TimePicker.props,
     ...DatePicker.props,

src/datetime-picker/TimePicker.tsx

@@ -1,4 +1,11 @@
-import { ref, watch, computed, nextTick, onMounted } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  onMounted,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import {
@@ -16,9 +23,11 @@ import { useExpose } from '../composables/use-expose';
 // Components
 import Picker from '../picker';
 
-const [createComponent] = createNamespace('time-picker');
+const [name] = createNamespace('time-picker');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...sharedProps,
     modelValue: String,

src/datetime-picker/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _DatetimePicker from './DatetimePicker';
+
+const DatetimePicker = installable(_DatetimePicker);
+
+export default DatetimePicker;
+export { DatetimePicker };

src/datetime-picker/utils.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { isNaN } from '../utils/validate/number';
-import { pickerProps } from '../picker';
+import { pickerProps } from '../picker/Picker';
 
 export type ColumnType = 'year' | 'month' | 'day' | 'hour' | 'minute';
 

src/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { PropType, reactive } from 'vue';
+import { PropType, reactive, defineComponent } from 'vue';
 
 // Utils
 import { callInterceptor, Interceptor } from '../utils/interceptor';
@@ -12,7 +12,7 @@ import ActionBar from '../action-bar';
 import ActionBarButton from '../action-bar-button';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
-const [createComponent, bem, t] = createNamespace('dialog');
+const [name, bem, t] = createNamespace('dialog');
 
 export type DialogTheme = 'default' | 'round-button';
 export type DialogAction = 'confirm' | 'cancel';
@@ -24,7 +24,9 @@ const popupKeys = [
   'closeOnPopstate',
 ] as const;
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     ...popupSharedProps,
     title: String,

src/dialog/index.tsx

@@ -1,5 +1,5 @@
-import { App, Plugin, CSSProperties, TeleportProps } from 'vue';
+import { App, CSSProperties, TeleportProps } from 'vue';
-import { inBrowser, ComponentInstance } from '../utils';
+import { inBrowser, ComponentInstance, installable } from '../utils';
 import { Interceptor } from '../utils/interceptor';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import VanDialog, {
@@ -120,10 +120,10 @@ Dialog.resetDefaultOptions = () => {
 };
 
 Dialog.install = (app: App) => {
-  app.use((VanDialog as unknown) as Plugin);
+  app.use(installable(VanDialog));
   app.config.globalProperties.$dialog = Dialog;
 };
 
-Dialog.Component = VanDialog;
+Dialog.Component = installable(VanDialog);
 
 export default Dialog;

src/dialog/test/funciton-call.spec.js

@@ -11,7 +11,7 @@ test('should update default options when calling setDefaultOptions method', () =
 });
 
 test('should expose Dialog component', () => {
-  expect(Dialog.Component).toEqual(DialogComponent);
+  expect(Dialog.Component.name).toEqual('van-dialog');
 });
 
 test('should register component to app', () => {

src/divider/Divider.tsx

@@ -1,11 +1,13 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { createNamespace } from '../utils';
 
-const [createComponent, bem] = createNamespace('divider');
+const [name, bem] = createNamespace('divider');
 
 export type DividerContentPosition = 'left' | 'center' | 'right';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     dashed: Boolean,
     hairline: {

src/divider/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _Divider from './Divider';
+
+const Divider = installable(_Divider);
+
+export default Divider;
+export { Divider };
+export type { DividerContentPosition } from './Divider';

src/dropdown-item/DropdownItem.tsx

@@ -4,11 +4,15 @@ import {
   PropType,
   TeleportProps,
   CSSProperties,
+  defineComponent,
 } from 'vue';
 
 // Utils
 import { createNamespace, getZIndexStyle, UnknownProp } from '../utils';
-import { DROPDOWN_KEY, DropdownMenuProvide } from '../dropdown-menu';
+import {
+  DROPDOWN_KEY,
+  DropdownMenuProvide,
+} from '../dropdown-menu/DropdownMenu';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -19,7 +23,7 @@ import Cell from '../cell';
 import Icon from '../icon';
 import Popup from '../popup';
 
-const [createComponent, bem] = createNamespace('dropdown-item');
+const [name, bem] = createNamespace('dropdown-item');
 
 export type DropdownItemOption = {
   text: string;
@@ -27,7 +31,9 @@ export type DropdownItemOption = {
   value: number | string;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     title: String,
     disabled: Boolean,

src/dropdown-item/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _DropdownItem from './DropdownItem';
+
+const DropdownItem = installable(_DropdownItem);
+
+export default DropdownItem;
+export { DropdownItem };
+export type { DropdownItemOption } from './DropdownItem';

src/dropdown-menu/DropdownMenu.tsx

@@ -1,4 +1,11 @@
-import { ref, computed, PropType, CSSProperties, Ref } from 'vue';
+import {
+  ref,
+  Ref,
+  computed,
+  PropType,
+  CSSProperties,
+  defineComponent,
+} from 'vue';
 
 // Utils
 import { isDef, ComponentInstance, createNamespace } from '../utils';
@@ -12,9 +19,9 @@ import {
   useEventListener,
 } from '@vant/use';
 
-const [createComponent, bem] = createNamespace('dropdown-menu');
+const [name, bem] = createNamespace('dropdown-menu');
 
-export const DROPDOWN_KEY = Symbol('DropdownMenu');
+export const DROPDOWN_KEY = Symbol(name);
 
 export type DropdownMenuDirection = 'up' | 'down';
 
@@ -30,7 +37,9 @@ export type DropdownMenuProvide = {
   offset: Ref<number>;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     zIndex: [Number, String],
     activeColor: String,

src/dropdown-menu/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _DropdownMenu from './DropdownMenu';
+
+const DropdownMenu = installable(_DropdownMenu);
+
+export default DropdownMenu;
+export { DropdownMenu };
+export type { DropdownMenuDirection } from './DropdownMenu';

src/empty/Empty.tsx

@@ -1,11 +1,14 @@
+import { defineComponent } from 'vue';
 import { createNamespace, getSizeStyle } from '../utils';
 import { Network } from './Network';
 
-const [createComponent, bem] = createNamespace('empty');
+const [name, bem] = createNamespace('empty');
 
 const PRESET_IMAGES = ['error', 'search', 'default'];
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     imageSize: [Number, String],
     description: String,

src/empty/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Empty from './Empty';
+
+const Empty = installable(_Empty);
+
+export default Empty;
+export { Empty };

src/field/Field.tsx

@@ -7,6 +7,7 @@ import {
   reactive,
   PropType,
   onMounted,
+  defineComponent,
 } from 'vue';
 
 // Utils
@@ -28,6 +29,7 @@ import {
   resizeTextarea,
   runRuleValidator,
 } from './utils';
+import { cellProps } from '../cell/Cell';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -36,7 +38,7 @@ import { FORM_KEY, FIELD_KEY } from '../composables/use-link-field';
 
 // Components
 import Icon from '../icon';
-import Cell, { cellProps } from '../cell';
+import Cell from '../cell';
 
 // Types
 import type {
@@ -50,9 +52,11 @@ import type {
   FieldValidateTrigger,
 } from './types';
 
-const [createComponent, bem] = createNamespace('field');
+const [name, bem] = createNamespace('field');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...cellProps,
     rows: [Number, String],

src/field/index.ts

@@ -0,0 +1,17 @@
+import { installable } from '../utils';
+import _Field from './Field';
+
+const Field = installable(_Field);
+
+export default Field;
+export { Field };
+export type {
+  FieldType,
+  FieldRule,
+  FieldTextAlign,
+  FieldClearTrigger,
+  FieldFormatTrigger,
+  FieldValidateError,
+  FieldAutosizeConfig,
+  FieldValidateTrigger,
+} from './types';

src/form/Form.tsx

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, ComponentInstance } from '../utils';
@@ -15,9 +15,11 @@ import type {
   FieldValidateTrigger,
 } from '../field/types';
 
-const [createComponent, bem] = createNamespace('form');
+const [name, bem] = createNamespace('form');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     colon: Boolean,
     disabled: Boolean,

src/form/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Form from './Form';
+
+const Form = installable(_Form);
+
+export default Form;
+export { Form };

src/grid-item/GridItem.tsx

@@ -1,9 +1,9 @@
-import { computed, CSSProperties } from 'vue';
+import { computed, CSSProperties, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, addUnit } from '../utils';
 import { BORDER } from '../utils/constant';
-import { GRID_KEY, GridProvide } from '../grid';
+import { GRID_KEY, GridProvide } from '../grid/Grid';
 
 // Composables
 import { useParent } from '@vant/use';
@@ -13,9 +13,11 @@ import { useRoute, routeProps } from '../composables/use-route';
 import Icon from '../icon';
 import Badge from '../badge';
 
-const [createComponent, bem] = createNamespace('grid-item');
+const [name, bem] = createNamespace('grid-item');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     ...routeProps,
     dot: Boolean,

src/grid-item/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _GridItem from './GridItem';
+
+const GridItem = installable(_GridItem);
+
+export default GridItem;
+export { GridItem };

src/grid/Grid.tsx

@@ -1,11 +1,11 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP } from '../utils/constant';
 import { useChildren } from '@vant/use';
 
-const [createComponent, bem] = createNamespace('grid');
+const [name, bem] = createNamespace('grid');
 
-export const GRID_KEY = Symbol('Grid');
+export const GRID_KEY = Symbol(name);
 
 export type GridDirection = 'horizontal' | 'vertical';
 
@@ -22,7 +22,9 @@ export type GridProvide = {
   };
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     square: Boolean,
     gutter: [Number, String],

src/grid/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Grid from './Grid';
+
+const Grid = installable(_Grid);
+
+export default Grid;
+export { Grid };

src/icon/Icon.tsx

@@ -1,14 +1,16 @@
-import { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { addUnit, createNamespace } from '../utils';
 import Badge from '../badge';
 
-const [createComponent, bem] = createNamespace('icon');
+const [name, bem] = createNamespace('icon');
 
 function isImage(name?: string) {
   return name ? name.includes('/') : false;
 }
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     dot: Boolean,
     name: String,

src/icon/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _Icon from './Icon';
+
+const Icon = installable(_Icon);
+
+export default Icon;
+export { Icon };

src/image-preview/ImagePreview.tsx

@@ -6,6 +6,7 @@ import {
   reactive,
   onMounted,
   CSSProperties,
+  defineComponent,
 } from 'vue';
 
 // Utils
@@ -27,14 +28,16 @@ import Swipe, { SwipeToOptions } from '../swipe';
 import Popup, { PopupCloseIconPosition } from '../popup';
 import ImagePreviewItem from './ImagePreviewItem';
 
-const [createComponent, bem] = createNamespace('image-preview');
+const [name, bem] = createNamespace('image-preview');
 
 export type ScaleEventParams = {
   scale: number;
   index: number;
 };
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     show: Boolean,
     closeable: Boolean,

src/image-preview/index.tsx

@@ -1,5 +1,5 @@
-import { App, CSSProperties, Plugin, TeleportProps } from 'vue';
+import { App, CSSProperties, TeleportProps } from 'vue';
-import { ComponentInstance, inBrowser } from '../utils';
+import { ComponentInstance, inBrowser, installable } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import { Interceptor } from '../utils/interceptor';
 import { PopupCloseIconPosition } from '../popup';
@@ -97,10 +97,10 @@ const ImagePreview = (
   return instance;
 };
 
-ImagePreview.Component = VanImagePreview;
+ImagePreview.Component = installable(VanImagePreview);
 
 ImagePreview.install = (app: App) => {
-  app.use((VanImagePreview as unknown) as Plugin);
+  app.use(installable(VanImagePreview));
 };
 
 export default ImagePreview;

src/image-preview/test/function.spec.ts

@@ -3,7 +3,7 @@ import ImagePreview from '..';
 import ImagePreviewComponent from '../ImagePreview';
 
 test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
-  expect(ImagePreview.Component).toEqual(ImagePreviewComponent);
+  expect(ImagePreview.Component.name).toEqual('van-image-preview');
 });
 
 test('should register component to app', () => {

src/image/Image.tsx

@@ -5,6 +5,7 @@ import {
   PropType,
   CSSProperties,
   onBeforeUnmount,
+  defineComponent,
   getCurrentInstance,
 } from 'vue';
 import {
@@ -16,11 +17,13 @@ import {
 } from '../utils';
 import Icon from '../icon';
 
-const [createComponent, bem] = createNamespace('image');
+const [name, bem] = createNamespace('image');
 
 export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
 
-export default createComponent({
+export default defineComponent({
+  name,
+
   props: {
     src: String,
     alt: String,

src/image/index.ts

@@ -0,0 +1,8 @@
+import { installable } from '../utils';
+import _Image from './Image';
+
+const Image = installable(_Image);
+
+export default Image;
+export { Image };
+export type { ImageFit } from './Image';

src/index-anchor/IndexAnchor.tsx

@@ -1,18 +1,20 @@
-import { ref, reactive, computed, CSSProperties } from 'vue';
+import { ref, reactive, computed, CSSProperties, defineComponent } from 'vue';
 
 // Utils
 import { createNamespace, getZIndexStyle } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
-import { INDEX_BAR_KEY, IndexBarProvide } from '../index-bar';
+import { INDEX_BAR_KEY, IndexBarProvide } from '../index-bar/IndexBar';
 import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
 
 // Composables
 import { useRect, useParent } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
-const [createComponent, bem] = createNamespace('index-anchor');
+const [name, bem] = createNamespace('index-anchor');
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     index: [Number, String],
   },

src/index-anchor/index.ts

@@ -0,0 +1,7 @@
+import { installable } from '../utils';
+import _IndexAnchor from './IndexAnchor';
+
+const IndexAnchor = installable(_IndexAnchor);
+
+export default IndexAnchor;
+export { IndexAnchor };

src/index-bar/IndexBar.tsx

@@ -6,6 +6,7 @@ import {
   PropType,
   onMounted,
   CSSProperties,
+  defineComponent,
 } from 'vue';
 
 // Utils
@@ -30,8 +31,6 @@ import {
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 
-export const INDEX_BAR_KEY = Symbol('IndexBar');
-
 export type IndexBarProvide = {
   props: {
     sticky: boolean;
@@ -49,9 +48,13 @@ function genAlphabet() {
   return indexList;
 }
 
-const [createComponent, bem] = createNamespace('index-bar');
+const [name, bem] = createNamespace('index-bar');
+
+export const INDEX_BAR_KEY = Symbol(name);
+
+export default defineComponent({
+  name,
 
-export default createComponent({
   props: {
     zIndex: [Number, String],
     highlightColor: String,