fix(tabs): modify the issue of the mobile demo not displaying and reporting errors (#2710)

Author: James-9696

packages/mobile/components/tabs/src/renderless/index.ts

@@ -14,12 +14,12 @@ import type { ITabsRenderlessParams, ITabsPane, ITabsCustomEvent, ITabsPaneVm }
 export const calcPaneInstances =
   ({
     constants,
-    parent,
+    vm,
     state,
     childrenHandler
-  }: Pick<ITabsRenderlessParams, 'constants' | 'parent' | 'state' | 'childrenHandler'>) =>
+  }: Pick<ITabsRenderlessParams, 'constants' | 'vm' | 'state' | 'childrenHandler'>) =>
   (isForceUpdate = false) => {
-    const tabItemVNodes = parent.$slots.default
+    const tabItemVNodes = vm.$slots.default
 
     /* istanbul ignore if */
     if (tabItemVNodes) {
@@ -62,13 +62,13 @@ export const calcPaneInstances =
 
 /* istanbul ignore */
 export const calcMorePanes =
-  ({ parent, props, state, refs }: Pick<ITabsRenderlessParams, 'parent' | 'props' | 'state' | 'refs'>) =>
+  ({ vm, props, state, refs }: Pick<ITabsRenderlessParams, 'vm' | 'props' | 'state' | 'refs'>) =>
   () => {
     if (!props.showMoreTabs) {
       return
     }
 
-    const el = parent.$el
+    const el = vm.$el
     const tabs = el.querySelectorAll('.tiny-tabs__item')
     const tabNavRefs = refs.nav.$refs
 
@@ -93,12 +93,12 @@ export const calcMorePanes =
   }
 
 export const calcExpandPanes =
-  ({ parent, props, state }: Pick<ITabsRenderlessParams, 'parent' | 'props' | 'state'>) =>
+  ({ vm, props, state }: Pick<ITabsRenderlessParams, 'vm' | 'props' | 'state'>) =>
   () => {
     if (!props.showExpandTabs) {
       return
     }
-    const el = parent.$el
+    const el = vm.$el
     const tabsHeader = el.querySelector('.tiny-mobile-tabs__header')
 
     if (tabsHeader) {
@@ -185,11 +185,11 @@ export const changeCurrentName =
   }
 
 export const created =
-  ({ api, parent, state }: Pick<ITabsRenderlessParams, 'api' | 'parent' | 'state'>) =>
+  ({ api, vm, state }: Pick<ITabsRenderlessParams, 'api' | 'vm' | 'state'>) =>
   () => {
     api.changeDirection(state.currentName)
 
-    parent.$on('tab-nav-update', api.calcPaneInstances.bind(null, true))
+    vm.$on('tab-nav-update', api.calcPaneInstances.bind(null, true))
   }
 
 export const changeDirection =

packages/mobile/components/tabs/src/renderless/vue.ts

@@ -102,7 +102,7 @@ const initWatcher = ({
 export const renderless = (
   props: ITabsProps,
   { onMounted, onUpdated, provide, reactive, watch }: ISharedRenderlessParamHooks,
-  { refs, parent, emit, constants, nextTick, childrenHandler }: ITabsRenderlessParamUtils
+  { refs, parent, vm, emit, constants, nextTick, childrenHandler }: ITabsRenderlessParamUtils
 ): ITabsApi => {
   const api = {} as ITabsApi
   const state: ITabsState = initState({ reactive, props })
@@ -113,20 +113,20 @@ export const renderless = (
     handleTabRemove: handleTabRemove({ emit, props }),
     changeDirection: changeDirection({ props, state }),
     changeCurrentName: changeCurrentName({ emit, state }),
-    calcMorePanes: calcMorePanes({ parent, props, state, refs }),
-    calcExpandPanes: calcExpandPanes({ parent, props, state }),
-    calcPaneInstances: calcPaneInstances({ constants, parent, state, childrenHandler }),
+    calcMorePanes: calcMorePanes({ vm, props, state, refs }),
+    calcExpandPanes: calcExpandPanes({ vm, props, state }),
+    calcPaneInstances: calcPaneInstances({ constants, vm, state, childrenHandler }),
     handleTabDragStart: handleTabDragStart({ emit }),
     handleTabDragOver: handleTabDragOver({ emit }),
     handleTabDragEnd: handleTabDragEnd({ state, emit }),
     handleTabClick: handleTabClick({ api, emit, props, refs }),
     setCurrentName: setCurrentName({ api, props, refs, state }),
-    created: created({ api, parent, state })
+    created: created({ api, vm, state })
   })
 
   api.created()
 
-  provide('rootTabs', parent)
+  provide('rootTabs', vm)
 
   provide('separator', state.separator)