diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index de17b1e917311d0bfd97e25ecdb2e0b4e2697f60..0d4ba495e2c4a188eeb9341252da09eacff05ec4 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -13,6 +13,10 @@
 - 打包代码拆分(试验)
 - 提取上传地址到全局变量，打包可以动态配置
 
+### ✨ Refactor
+
+- tree 组件 ref 函数调用删除 `$`
+
 ### ⚡ Performance Improvements
 
 - 页面切换 loading 逻辑修改。对于已经加载过的页面不管有没有关闭,再次打开不会在显示 loading(已经打开过的页面再次打开速度比较快,可以不需要 loading,同理顶部进度条逻辑也一样)，刷新后恢复。
diff --git a/src/components/Container/src/ScrollContainer.vue b/src/components/Container/src/ScrollContainer.vue
index 663c31ee02cea5ba8e45962728ecc23fb00c82ac..71cae31fd24c47112972eff90bf227ec5044e420 100644
--- a/src/components/Container/src/ScrollContainer.vue
+++ b/src/components/Container/src/ScrollContainer.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
   import { defineComponent, ref, unref, nextTick } from 'vue';
-  import { Scrollbar } from '/@/components/Scrollbar';
+  import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
 
   import { useScrollTo } from '/@/hooks/event/useScrollTo';
 
@@ -19,15 +19,17 @@
     name: 'ScrollContainer',
     components: { Scrollbar },
     setup() {
-      const scrollbarRef = ref<RefInstanceType<any>>(null);
+      const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
 
       function scrollTo(to: number, duration = 500) {
         const scrollbar = unref(scrollbarRef);
         if (!scrollbar) return;
 
         nextTick(() => {
+          const wrap = unref(scrollbar.wrap);
+          if (!wrap) return;
           const { start } = useScrollTo({
-            el: unref(scrollbar.$.wrap),
+            el: wrap,
             to,
             duration,
           });
@@ -38,7 +40,7 @@
       function getScrollWrap() {
         const scrollbar = unref(scrollbarRef);
         if (!scrollbar) return null;
-        return scrollbar.$.wrap;
+        return scrollbar.wrap;
       }
 
       function scrollBottom() {
@@ -46,9 +48,11 @@
         if (!scrollbar) return;
 
         nextTick(() => {
-          const scrollHeight = scrollbar.$.wrap.scrollHeight as number;
+          const wrap = unref(scrollbar.wrap);
+          if (!wrap) return;
+          const scrollHeight = wrap.scrollHeight as number;
           const { start } = useScrollTo({
-            el: unref(scrollbar.$.wrap),
+            el: wrap,
             to: scrollHeight,
           });
           start();
diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue
index 653a960767f2aafe557b84fa05c2272651e60852..d1fd566266488f026286d71e7c8eaf384b748d1f 100644
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -31,17 +31,7 @@
   import type { Ref, WatchStopHandle } from 'vue';
   import type { ValidateFields } from 'ant-design-vue/lib/form/interface';
 
-  import {
-    defineComponent,
-    reactive,
-    ref,
-    computed,
-    unref,
-    toRef,
-    onMounted,
-    watch,
-    toRefs,
-  } from 'vue';
+  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue';
   import { Form, Row } from 'ant-design-vue';
   import FormItem from './FormItem';
   import { basicProps } from './props';
diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts
index b509e1431021dbaa473a4d61152ebbc59b122e02..5efa77a21f5a5af9eca6eb65ef68efcb805c9d31 100644
--- a/src/components/Scrollbar/index.ts
+++ b/src/components/Scrollbar/index.ts
@@ -2,4 +2,10 @@
  * copy from element-ui
  */
 
-export { default as Scrollbar } from './src/Scrollbar';
+import Scrollbar from './src/Scrollbar';
+import { withInstall } from '../util';
+
+withInstall(Scrollbar);
+
+export { Scrollbar };
+export type { ScrollbarType } from './src/types';
diff --git a/src/components/Scrollbar/src/Scrollbar.tsx b/src/components/Scrollbar/src/Scrollbar.tsx
index 4a82c1adc5f34ede787b6bbdd1f72cfef094b21d..87de59907c2c8367008b2ad99118be8ce7cc2e1a 100644
--- a/src/components/Scrollbar/src/Scrollbar.tsx
+++ b/src/components/Scrollbar/src/Scrollbar.tsx
@@ -15,8 +15,9 @@ import {
   onBeforeUnmount,
 } from 'vue';
 import { getSlot } from '/@/utils/helper/tsxHelper';
-import { tryTsxEmit } from '/@/utils/helper/vueHelper';
 import './index.less';
+import { useExpose } from '/@/hooks/core/useExpose';
+import { ScrollbarType } from './types';
 
 export default defineComponent({
   name: 'Scrollbar',
@@ -65,10 +66,9 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      tryTsxEmit<any>((instance) => {
-        instance.wrap = unref(wrapElRef);
+      useExpose<ScrollbarType>({
+        wrap: unref(wrapElRef),
       });
-
       const { native, noresize } = props;
       const resizeEl = unref(resizeRef);
       const warpEl = unref(wrapElRef);
diff --git a/src/components/Scrollbar/src/types.d.ts b/src/components/Scrollbar/src/types.d.ts
index 1216a65d7f08df8e3e6e9a411f630d41226e106f..4c7eeea84bc06667a905497f41339407190a1fd0 100644
--- a/src/components/Scrollbar/src/types.d.ts
+++ b/src/components/Scrollbar/src/types.d.ts
@@ -12,3 +12,7 @@ export interface BarMap {
   vertical: BarMapItem;
   horizontal: BarMapItem;
 }
+
+export interface ScrollbarType {
+  wrap: ElRef;
+}
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 5f6d550f9a9ccf164c5e5785e6dda88674f715b3..55548482ba325d3042006bb1717978b9132b9011 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -69,6 +69,7 @@
   import { basicProps } from './props';
   import { ROW_KEY } from './const';
   import './style/index.less';
+  import { useExpose } from '/@/hooks/core/useExpose';
   export default defineComponent({
     props: basicProps,
     components: { Table, BasicForm },
@@ -309,6 +310,8 @@
         wrapRef,
       });
 
+      useExpose<TableActionType>(tableAction);
+
       emit('register', tableAction);
       return {
         tableElRef,
@@ -322,7 +325,7 @@
         getRowClassName,
         wrapRef,
         tableAction,
-        ...tableAction,
+        redoHeight,
       };
     },
   });
diff --git a/src/components/Tree/src/BasicTree.tsx b/src/components/Tree/src/BasicTree.tsx
index f49cfb61bb54aaaa37330a1c0c4c94409be189ee..394ecf309509783104345cea4c71dfb92f571c9b 100644
--- a/src/components/Tree/src/BasicTree.tsx
+++ b/src/components/Tree/src/BasicTree.tsx
@@ -11,10 +11,10 @@ import { useContextMenu, ContextMenuItem } from '/@/hooks/web/useContextMenu';
 import { isFunction } from '/@/utils/is';
 import { omit } from 'lodash-es';
 import { extendSlots } from '/@/utils/helper/tsxHelper';
-import { tryTsxEmit } from '/@/utils/helper/vueHelper';
 
 import { basicProps } from './props';
 import { useTree } from './useTree';
+import { useExpose } from '/@/hooks/core/useExpose';
 
 interface State {
   expandedKeys: Keys;
@@ -182,20 +182,21 @@ export default defineComponent({
       state.checkedKeys = props.checkedKeys;
     });
 
-    tryTsxEmit<TreeActionType>((currentInstance) => {
-      currentInstance.setExpandedKeys = setExpandedKeys;
-      currentInstance.getExpandedKeys = getExpandedKeys;
-      currentInstance.setSelectedKeys = setSelectedKeys;
-      currentInstance.getSelectedKeys = getSelectedKeys;
-      currentInstance.setCheckedKeys = setCheckedKeys;
-      currentInstance.getCheckedKeys = getCheckedKeys;
-      currentInstance.insertNodeByKey = insertNodeByKey;
-      currentInstance.deleteNodeByKey = deleteNodeByKey;
-      currentInstance.updateNodeByKey = updateNodeByKey;
-      currentInstance.filterByLevel = (level: number) => {
+    useExpose<TreeActionType>({
+      setExpandedKeys,
+      getExpandedKeys,
+      setSelectedKeys,
+      getSelectedKeys,
+      setCheckedKeys,
+      getCheckedKeys,
+      insertNodeByKey,
+      deleteNodeByKey,
+      updateNodeByKey,
+      filterByLevel: (level: number) => {
         state.expandedKeys = filterByLevel(level);
-      };
+      },
     });
+
     return () => {
       return (
         <Tree {...unref(getBindValues)} class={prefixCls}>
diff --git a/src/components/Verify/src/DragVerify.tsx b/src/components/Verify/src/DragVerify.tsx
index 2807165fc31e46d2c6b676473e59d8e06e8b711e..3ccc4d64377086ae31952c6195559670ae1c6c04 100644
--- a/src/components/Verify/src/DragVerify.tsx
+++ b/src/components/Verify/src/DragVerify.tsx
@@ -5,8 +5,8 @@ import { basicProps } from './props';
 import { getSlot } from '/@/utils/helper/tsxHelper';
 import './DragVerify.less';
 import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
-import { tryTsxEmit } from '/@/utils/helper/vueHelper';
 import type { DragVerifyActionType } from './types';
+import { useExpose } from '/@/hooks/core/useExpose';
 export default defineComponent({
   name: 'BaseDargVerify',
   props: basicProps,
@@ -211,8 +211,8 @@ export default defineComponent({
       contentEl.style.width = unref(getContentStyleRef).width;
     }
 
-    tryTsxEmit<DragVerifyActionType>((instance) => {
-      instance.resume = resume;
+    useExpose<DragVerifyActionType>({
+      resume,
     });
 
     return () => {
diff --git a/src/components/Verify/src/ImgRotate.tsx b/src/components/Verify/src/ImgRotate.tsx
index 4a0a8746a65b23bcb1f339bff1494e5771bb75d4..166396e40bab30d471fc30faceae7f0c64d9427f 100644
--- a/src/components/Verify/src/ImgRotate.tsx
+++ b/src/components/Verify/src/ImgRotate.tsx
@@ -18,7 +18,7 @@ export default defineComponent({
   props: rotateProps,
   emits: ['success', 'change', 'update:value'],
   setup(props, { emit, attrs }) {
-    const basicRef = ref<RefInstanceType<DragVerifyActionType>>(null);
+    const basicRef = ref<Nullable<DragVerifyActionType>>(null);
     const state = reactive({
       showTip: false,
       isPassing: false,
@@ -113,7 +113,7 @@ export default defineComponent({
       }
       state.isPassing = false;
 
-      basicEl.$.resume();
+      basicEl.resume();
       handleImgOnLoad();
     }
 
diff --git a/src/hooks/core/useExpose.ts b/src/hooks/core/useExpose.ts
index 3a06d4ac4612d19a99e2ac5d6b74c74af4a50ee0..224b5aae9df6b786e994fbe1348b08b4b2f2705f 100644
--- a/src/hooks/core/useExpose.ts
+++ b/src/hooks/core/useExpose.ts
@@ -1,7 +1,7 @@
 import { getCurrentInstance } from 'vue';
 
 // expose public api
-export function useExpose(apis: Record<string, any>) {
+export function useExpose<T>(apis: T) {
   const instance = getCurrentInstance();
   if (instance) {
     Object.assign(instance.proxy, apis);
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 65a9e4334030211dd4d808f27c9669e2aedf50a6..0874781a2819435c167b724078884dab5643661d 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -19,10 +19,6 @@ declare type Dictionary<T> = Record<string, T>;
 
 declare type Nullable<T> = T | null;
 
-declare type RefInstanceType<T> = {
-  $: T;
-} | null;
-
 declare type RefType<T> = T | null;
 
 declare type CustomizedHTMLElement<T> = HTMLElement & T;
diff --git a/src/views/demo/comp/verify/index.vue b/src/views/demo/comp/verify/index.vue
index ad7c484d295fc122ae610fd355e1f42690e6209a..10efb006ca8d481ba6feb0b2a9d2e736956fbd5a 100644
--- a/src/views/demo/comp/verify/index.vue
+++ b/src/views/demo/comp/verify/index.vue
@@ -59,22 +59,22 @@
     components: { BasicDragVerify, BugOutlined, RightOutlined },
     setup() {
       const { createMessage } = useMessage();
-      const el1 = ref<RefInstanceType<DragVerifyActionType>>(null);
-      const el2 = ref<RefInstanceType<DragVerifyActionType>>(null);
-      const el3 = ref<RefInstanceType<DragVerifyActionType>>(null);
-      const el4 = ref<RefInstanceType<DragVerifyActionType>>(null);
-      const el5 = ref<RefInstanceType<DragVerifyActionType>>(null);
+      const el1 = ref<Nullable<DragVerifyActionType>>(null);
+      const el2 = ref<Nullable<DragVerifyActionType>>(null);
+      const el3 = ref<Nullable<DragVerifyActionType>>(null);
+      const el4 = ref<Nullable<DragVerifyActionType>>(null);
+      const el5 = ref<Nullable<DragVerifyActionType>>(null);
 
       function handleSuccess(data: PassingData) {
         const { time } = data;
         createMessage.success(`校验成功,耗时${time}秒`);
       }
 
-      function handleBtnClick(elRef: RefInstanceType<DragVerifyActionType>) {
+      function handleBtnClick(elRef: Nullable<DragVerifyActionType>) {
         if (!elRef) {
           return;
         }
-        elRef.$.resume();
+        elRef.resume();
       }
       return {
         handleSuccess,
diff --git a/src/views/demo/tree/ActionTree.vue b/src/views/demo/tree/ActionTree.vue
index 1a402ee1eceb555b75fb7eb48fd1989be29f927a..5bfdeb55027fdf27c0265edd6581b4c929c1087f 100644
--- a/src/views/demo/tree/ActionTree.vue
+++ b/src/views/demo/tree/ActionTree.vue
@@ -32,14 +32,14 @@
   export default defineComponent({
     components: { BasicTree, CollapseContainer },
     setup() {
-      const treeRef = ref<RefInstanceType<TreeActionType>>(null);
+      const treeRef = ref<Nullable<TreeActionType>>(null);
       const { createMessage } = useMessage();
       function getTree() {
         const tree = unref(treeRef);
         if (!tree) {
           throw new Error('tree is null!');
         }
-        return tree.$;
+        return tree;
       }
 
       function handleLevel(level: number) {