diff --git a/components/vc-align/Align.tsx b/components/vc-align/Align.tsx
index fdf9afc6b..de1f793ba 100644
--- a/components/vc-align/Align.tsx
+++ b/components/vc-align/Align.tsx
@@ -1,4 +1,5 @@
-import { nextTick, PropType } from 'vue';
+import type { PropType } from 'vue';
+import { nextTick } from 'vue';
 import { defineComponent, ref, computed, onMounted, onUpdated, watch, onUnmounted } from 'vue';
 import { alignElement, alignPoint } from 'dom-align';
 import addEventListener from '../vc-util/Dom/addEventListener';
diff --git a/components/vc-picker/Picker.tsx b/components/vc-picker/Picker.tsx
index deaac2267..e57d59033 100644
--- a/components/vc-picker/Picker.tsx
+++ b/components/vc-picker/Picker.tsx
@@ -527,7 +527,6 @@ function Picker<DateType>() {
         return (
           <PickerTrigger
             visible={mergedOpen.value}
-            popupElement={panel}
             popupStyle={popupStyle}
             prefixCls={prefixCls}
             dropdownClassName={dropdownClassName}
@@ -536,6 +535,9 @@ function Picker<DateType>() {
             transitionName={transitionName}
             popupPlacement={popupPlacement}
             direction={direction}
+            v-slots={{
+              popupElement: () => panel,
+            }}
           >
             <div
               class={classNames(prefixCls, attrs.class, {
diff --git a/components/vc-picker/PickerTrigger.tsx b/components/vc-picker/PickerTrigger.tsx
index aa7149311..4b133ff4d 100644
--- a/components/vc-picker/PickerTrigger.tsx
+++ b/components/vc-picker/PickerTrigger.tsx
@@ -2,7 +2,6 @@ import type { CSSProperties } from '@vue/runtime-dom';
 import type { AlignType } from '../vc-align/interface';
 import Trigger from '../vc-trigger';
 import classNames from '../_util/classNames';
-import type { VueNode } from '../_util/type';
 import useMergeProps from './hooks/useMergeProps';
 
 const BUILT_IN_PLACEMENTS = {
@@ -45,7 +44,6 @@ type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 export type PickerTriggerProps = {
   prefixCls: string;
   visible: boolean;
-  popupElement: VueNode;
   popupStyle?: CSSProperties;
   dropdownClassName?: string;
   transitionName?: string;
@@ -59,7 +57,6 @@ export type PickerTriggerProps = {
 function PickerTrigger(props: PickerTriggerProps, { slots }) {
   const {
     prefixCls,
-    popupElement,
     popupStyle,
     visible,
     dropdownClassName,
@@ -87,7 +84,6 @@ function PickerTrigger(props: PickerTriggerProps, { slots }) {
       builtinPlacements={BUILT_IN_PLACEMENTS}
       prefixCls={dropdownPrefixCls}
       popupTransitionName={transitionName}
-      popup={popupElement}
       popupAlign={dropdownAlign}
       popupVisible={visible}
       popupClassName={classNames(dropdownClassName, {
@@ -96,9 +92,11 @@ function PickerTrigger(props: PickerTriggerProps, { slots }) {
       })}
       popupStyle={popupStyle}
       getPopupContainer={getPopupContainer}
-    >
-      {slots.default?.()}
-    </Trigger>
+      v-slots={{
+        default: slots.default,
+        popup: slots.popupElement,
+      }}
+    ></Trigger>
   );
 }
 
diff --git a/components/vc-picker/RangePicker.tsx b/components/vc-picker/RangePicker.tsx
index 8e20bae8d..7a71bb085 100644
--- a/components/vc-picker/RangePicker.tsx
+++ b/components/vc-picker/RangePicker.tsx
@@ -1062,7 +1062,6 @@ function RangerPicker<DateType>() {
             style={{ minWidth: `${popupMinWidth.value}px` }}
           >
             <div class={`${prefixCls}-range-arrow`} style={arrowPositionStyle} />
-
             {renderPanels()}
           </div>
         );
@@ -1128,7 +1127,6 @@ function RangerPicker<DateType>() {
         return (
           <PickerTrigger
             visible={mergedOpen.value}
-            popupElement={rangePanel}
             popupStyle={popupStyle}
             prefixCls={prefixCls}
             dropdownClassName={dropdownClassName}
@@ -1137,6 +1135,9 @@ function RangerPicker<DateType>() {
             transitionName={transitionName}
             range
             direction={direction}
+            v-slots={{
+              popupElement: () => rangePanel,
+            }}
           >
             <div
               ref={containerRef}
diff --git a/components/vc-tooltip/src/Tooltip.tsx b/components/vc-tooltip/src/Tooltip.tsx
index e49cc36c9..982cb2aae 100644
--- a/components/vc-tooltip/src/Tooltip.tsx
+++ b/components/vc-tooltip/src/Tooltip.tsx
@@ -13,7 +13,7 @@ export default defineComponent({
     defaultVisible: PropTypes.looseBool,
     visible: PropTypes.looseBool,
     placement: PropTypes.string.def('right'),
-    transitionName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    transitionName: PropTypes.string,
     animation: PropTypes.any,
     afterVisibleChange: PropTypes.func.def(() => {}),
     overlay: PropTypes.any,
diff --git a/components/vc-trigger/Popup/MobilePopupInner.tsx b/components/vc-trigger/Popup/MobilePopupInner.tsx
index c2235e173..c5b3117f8 100644
--- a/components/vc-trigger/Popup/MobilePopupInner.tsx
+++ b/components/vc-trigger/Popup/MobilePopupInner.tsx
@@ -1,13 +1,15 @@
-import { CSSProperties, defineComponent, ref, Transition } from 'vue';
-import { flattenChildren } from 'ant-design-vue/es/_util/props-util';
-import classNames from 'ant-design-vue/es/_util/classNames';
-import { MobilePopupProps, mobileProps } from './interface';
+import type { CSSProperties } from 'vue';
+import { defineComponent, ref, Transition } from 'vue';
+import { flattenChildren } from '../../_util/props-util';
+import classNames from '../../_util/classNames';
+import type { MobilePopupProps } from './interface';
+import { mobileProps } from './interface';
 
 export default defineComponent({
+  name: 'MobilePopupInner',
+  inheritAttrs: false,
   props: mobileProps,
   emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
-  inheritAttrs: false,
-  name: 'MobilePopupInner',
   setup(props, { expose, slots }) {
     const elementRef = ref<HTMLDivElement>();
 
diff --git a/components/vc-trigger/Popup/PopupInner.tsx b/components/vc-trigger/Popup/PopupInner.tsx
index ec1bad246..8c25c793b 100644
--- a/components/vc-trigger/Popup/PopupInner.tsx
+++ b/components/vc-trigger/Popup/PopupInner.tsx
@@ -1,9 +1,9 @@
 import type { AlignType } from '../interface';
 import useVisibleStatus from './useVisibleStatus';
 import useStretchStyle from './useStretchStyle';
+import type { CSSProperties } from 'vue';
 import {
   computed,
-  CSSProperties,
   defineComponent,
   nextTick,
   ref,
@@ -12,19 +12,21 @@ import {
   watch,
   withModifiers,
 } from 'vue';
-import Align, { RefAlign } from 'ant-design-vue/es/vc-align/Align';
+import type { RefAlign } from '../../vc-align/Align';
+import Align from '../../vc-align/Align';
 import { getMotion } from '../utils/motionUtil';
-import { flattenChildren } from 'ant-design-vue/es/_util/props-util';
-import classNames from 'ant-design-vue/es/_util/classNames';
-import { innerProps, PopupInnerProps } from './interface';
-import { getTransitionProps } from 'ant-design-vue/es/_util/transition';
-import supportsPassive from 'ant-design-vue/es/_util/supportsPassive';
+import { flattenChildren } from '../../_util/props-util';
+import classNames from '../../_util/classNames';
+import type { PopupInnerProps } from './interface';
+import { innerProps } from './interface';
+import { getTransitionProps } from '../../_util/transition';
+import supportsPassive from '../../_util/supportsPassive';
 
 export default defineComponent({
-  props: innerProps,
   name: 'PopupInner',
-  emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
   inheritAttrs: false,
+  props: innerProps,
+  emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
   setup(props, { expose, attrs, slots }) {
     const alignRef = ref<RefAlign>();
     const elementRef = ref<HTMLDivElement>();
@@ -147,36 +149,46 @@ export default defineComponent({
       const mergedClassName = classNames(prefixCls, attrs.class, alignedClassName.value);
       const transitionProps = getTransitionProps(motion.value.name, motion.value);
       return (
-        <Transition ref={elementRef} {...transitionProps} onBeforeEnter={onShowPrepare}>
-          {!destroyPopupOnHide || visible ? (
-            <Align
-              v-show={visible}
-              target={getAlignTarget()}
-              key="popup"
-              ref={alignRef}
-              monitorWindowResize
-              disabled={alignDisabled}
-              align={align}
-              onAlign={onInternalAlign}
-            >
-              <div
-                class={mergedClassName}
-                onMouseenter={onMouseenter}
-                onMouseleave={onMouseleave}
-                onMousedown={withModifiers(onMousedown, ['capture'])}
-                {...{
-                  [supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: withModifiers(
-                    onTouchstart,
-                    ['capture'],
-                  ),
-                }}
-                style={mergedStyle}
-              >
-                {childNode}
-              </div>
-            </Align>
-          ) : null}
-        </Transition>
+        <Transition
+          ref={elementRef}
+          {...transitionProps}
+          onBeforeEnter={onShowPrepare}
+          v-slots={{
+            default: () => {
+              return !destroyPopupOnHide || visible ? (
+                <Align
+                  v-show={visible}
+                  target={getAlignTarget()}
+                  key="popup"
+                  ref={alignRef}
+                  monitorWindowResize
+                  disabled={alignDisabled}
+                  align={align}
+                  onAlign={onInternalAlign}
+                  v-slots={{
+                    default: () => (
+                      <div
+                        class={mergedClassName}
+                        onMouseenter={onMouseenter}
+                        onMouseleave={onMouseleave}
+                        onMousedown={withModifiers(onMousedown, ['capture'])}
+                        {...{
+                          [supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: withModifiers(
+                            onTouchstart,
+                            ['capture'],
+                          ),
+                        }}
+                        style={mergedStyle}
+                      >
+                        {childNode}
+                      </div>
+                    ),
+                  }}
+                ></Align>
+              ) : null;
+            },
+          }}
+        ></Transition>
       );
     };
   },
diff --git a/components/vc-trigger/Popup/index.tsx b/components/vc-trigger/Popup/index.tsx
index 71b42f906..4e482cf81 100644
--- a/components/vc-trigger/Popup/index.tsx
+++ b/components/vc-trigger/Popup/index.tsx
@@ -5,9 +5,9 @@ import MobilePopupInner from './MobilePopupInner';
 import PopupInner from './PopupInner';
 
 export default defineComponent({
-  props: popupProps,
-  inheritAttrs: false,
   name: 'Popup',
+  inheritAttrs: false,
+  props: popupProps,
   setup(props, { attrs, slots, expose }) {
     const innerVisible = ref(false);
     const inMobile = ref(false);
diff --git a/components/vc-trigger/Trigger.tsx b/components/vc-trigger/Trigger.tsx
index c5909f9ff..57e36354e 100644
--- a/components/vc-trigger/Trigger.tsx
+++ b/components/vc-trigger/Trigger.tsx
@@ -1,4 +1,5 @@
-import { computed, defineComponent, HTMLAttributes, inject, provide, ref } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { computed, defineComponent, inject, provide, ref } from 'vue';
 import PropTypes from '../_util/vue-types';
 import contains from '../vc-util/Dom/contains';
 import raf from '../_util/raf';
@@ -411,17 +412,16 @@ export default defineComponent({
       return popupAlign;
     },
     getComponent() {
-      const self = this;
       const mouseProps: HTMLAttributes = {};
       if (this.isMouseEnterToShow()) {
-        mouseProps.onMouseenter = self.onPopupMouseenter;
+        mouseProps.onMouseenter = this.onPopupMouseenter;
       }
       if (this.isMouseLeaveToHide()) {
-        mouseProps.onMouseleave = self.onPopupMouseleave;
+        mouseProps.onMouseleave = this.onPopupMouseleave;
       }
       mouseProps.onMousedown = this.onPopupMouseDown;
       mouseProps[supportsPassive ? 'onTouchstartPassive' : 'onTouchstart'] = this.onPopupMouseDown;
-      const { handleGetPopupClassFromAlign, getRootDomNode, getContainer, $attrs } = self;
+      const { handleGetPopupClassFromAlign, getRootDomNode, getContainer, $attrs } = this;
       const {
         prefixCls,
         destroyPopupOnHide,
@@ -437,7 +437,7 @@ export default defineComponent({
         alignPoint,
         mobile,
         forceRender,
-      } = self.$props;
+      } = this.$props;
       const { sPopupVisible, point } = this.$data;
       const popupProps = {
         prefixCls,
@@ -463,7 +463,12 @@ export default defineComponent({
         mobile,
         forceRender,
       } as any;
-      return <Popup {...popupProps}>{getComponent(self, 'popup')}</Popup>;
+      return (
+        <Popup
+          {...popupProps}
+          v-slots={{ default: this.$slots.popup || (() => getComponent(this, 'popup')) }}
+        ></Popup>
+      );
     },
 
     attachParent(popupContainer) {
diff --git a/v2-doc b/v2-doc
index 7a7b52df8..2aa53d9c7 160000
--- a/v2-doc
+++ b/v2-doc
@@ -1 +1 @@
-Subproject commit 7a7b52df8b3b69d8b1a8b8dcd96e1b0f7bb3f8c9
+Subproject commit 2aa53d9c7aae3b172d8837a0ba9118c3fd8c2038