From ccc7b2653434fbe4a55a91f99dd6f5b7aa5dd2df Mon Sep 17 00:00:00 2001
From: mrayi <1078464063@qq.com>
Date: Mon, 25 Mar 2024 17:33:10 +0800
Subject: [PATCH] refactor(tabbar): move to script setup (#2989)

---
 .../src/nav/pages/tabbar/basic.vue            |   6 +-
 .../src/nav/pages/tabbar/check.vue            |  12 +-
 .../src/nav/pages/tabbar/color.vue            |  16 +--
 .../src/nav/pages/tabbar/fixed.vue            |   6 +-
 .../src/nav/pages/tabbar/icon.vue             |   6 +-
 .../src/nav/pages/tabbar/name.vue             |  12 +-
 .../src/nav/pages/tabbar/quantity.vue         |  17 +--
 src/config.json                               |   2 +
 .../__snapshots__/index.spec.tsx.snap         |   6 +
 .../__VUE/tabbar/__tests__/index.spec.tsx     |  93 ++++++++++++--
 src/packages/__VUE/tabbar/demo/basic.vue      |   6 +-
 src/packages/__VUE/tabbar/demo/check.vue      |  12 +-
 src/packages/__VUE/tabbar/demo/color.vue      |  16 +--
 src/packages/__VUE/tabbar/demo/fixed.vue      |   6 +-
 src/packages/__VUE/tabbar/demo/icon.vue       |   6 +-
 src/packages/__VUE/tabbar/demo/name.vue       |  12 +-
 src/packages/__VUE/tabbar/demo/quantity.vue   |  17 +--
 src/packages/__VUE/tabbar/doc.en-US.md        |   8 ++
 src/packages/__VUE/tabbar/doc.md              |   8 ++
 src/packages/__VUE/tabbar/doc.taro.md         |   8 ++
 src/packages/__VUE/tabbar/index.taro.ts       |  11 ++
 src/packages/__VUE/tabbar/index.taro.vue      | 107 ----------------
 src/packages/__VUE/tabbar/index.ts            |  11 ++
 src/packages/__VUE/tabbar/index.vue           |  92 --------------
 src/packages/__VUE/tabbar/tabbar.taro.vue     |  81 ++++++++++++
 src/packages/__VUE/tabbar/tabbar.vue          |  80 ++++++++++++
 src/packages/__VUE/tabbaritem/index.taro.ts   |  11 ++
 src/packages/__VUE/tabbaritem/index.taro.vue  | 101 ---------------
 src/packages/__VUE/tabbaritem/index.ts        |  11 ++
 src/packages/__VUE/tabbaritem/index.vue       | 115 ------------------
 .../__VUE/tabbaritem/tabbar-item.taro.vue     |  88 ++++++++++++++
 src/packages/__VUE/tabbaritem/tabbar-item.vue |  88 ++++++++++++++
 src/packages/utils/useRelation/useParent.ts   |  15 ++-
 33 files changed, 599 insertions(+), 487 deletions(-)
 create mode 100644 src/packages/__VUE/tabbar/index.taro.ts
 delete mode 100644 src/packages/__VUE/tabbar/index.taro.vue
 create mode 100644 src/packages/__VUE/tabbar/index.ts
 delete mode 100644 src/packages/__VUE/tabbar/index.vue
 create mode 100644 src/packages/__VUE/tabbar/tabbar.taro.vue
 create mode 100644 src/packages/__VUE/tabbar/tabbar.vue
 create mode 100644 src/packages/__VUE/tabbaritem/index.taro.ts
 delete mode 100644 src/packages/__VUE/tabbaritem/index.taro.vue
 create mode 100644 src/packages/__VUE/tabbaritem/index.ts
 delete mode 100644 src/packages/__VUE/tabbaritem/index.vue
 create mode 100644 src/packages/__VUE/tabbaritem/tabbar-item.taro.vue
 create mode 100644 src/packages/__VUE/tabbaritem/tabbar-item.vue

diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/basic.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/basic.vue
index de405d4c0c..06e2549544 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabbar/basic.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabbar/basic.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
     <nut-tabbar-item tab-title="Home">
       <template #icon>
         <Home></Home>
@@ -29,7 +29,11 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
+const active = ref(0);
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/check.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/check.vue
index 7366e0859c..df8ccc2aec 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabbar/check.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabbar/check.vue
@@ -7,34 +7,36 @@
 <script lang="ts" setup>
 import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
 const active = ref(2);
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: h(Cart),
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/color.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/color.vue
index 4d534c1064..1e0f31c069 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabbar/color.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabbar/color.vue
@@ -1,37 +1,39 @@
 <template>
-  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+  <nut-tabbar v-model="active" unactive-color="#7d7e80" active-color="#1989fa">
     <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { h } from 'vue';
+import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: h(Cart),
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+const active = ref(0);
 </script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/fixed.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/fixed.vue
index 59d3fee5df..689dbcfe39 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabbar/fixed.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabbar/fixed.vue
@@ -1,12 +1,13 @@
 <template>
-  <nut-tabbar bottom safe-area-inset-bottom placeholder>
+  <nut-tabbar v-model="active" bottom safe-area-inset-bottom placeholder>
     <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { h } from 'vue';
+import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
 const List = [
   {
     title: 'Home',
@@ -29,4 +30,5 @@ const List = [
     icon: h(My)
   }
 ];
+const active = ref(0);
 </script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/icon.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/icon.vue
index 3d505ef7e2..eb177507fb 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabbar/icon.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabbar/icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
     <nut-tabbar-item tab-title="Home">
       <template #icon="props">
         <img :src="props.active ? icon.active : icon.unactive" alt="" />
@@ -18,10 +18,14 @@
   </nut-tabbar>
 </template>
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 const icon = {
   active: 'https://img11.360buyimg.com/imagetools/jfs/t1/70423/4/20553/3652/62e74629E23ba550e/aeeed0e3b9f43ae6.png',
   unactive: 'https://img13.360buyimg.com/imagetools/jfs/t1/23319/19/18329/3084/62e7c346E957c54ef/6c3e8a49e52b76f2.png'
 };
+const active = ref(0);
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/name.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/name.vue
index 0c584ec9fe..776419ccdc 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabbar/name.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabbar/name.vue
@@ -8,34 +8,36 @@
 <script lang="ts" setup>
 import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
 const activeName = ref('category');
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: Cart,
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/quantity.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/quantity.vue
index f2e82ad495..1c269bc445 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabbar/quantity.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabbar/quantity.vue
@@ -1,22 +1,25 @@
 <template>
-  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-    <nut-tabbar-item tab-title="label" :value="11">
+  <nut-tabbar v-model="active" unactive-color="#7d7e80" active-color="#1989fa">
+    <nut-tabbar-item tab-title="Home" :value="11">
       <template #icon>
         <Home></Home>
       </template>
     </nut-tabbar-item>
-    <nut-tabbar-item tab-title="label" :dot="true">
+    <nut-tabbar-item tab-title="Category" :dot="true">
       <template #icon>
-        <Home></Home>
+        <Category></Category>
       </template>
     </nut-tabbar-item>
-    <nut-tabbar-item tab-title="label" :value="110">
+    <nut-tabbar-item tab-title="Find" :value="110">
       <template #icon>
-        <Home></Home>
+        <Find></Find>
       </template>
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { Home } from '@nutui/icons-vue-taro';
+import { ref } from 'vue';
+import { Home, Category, Find } from '@nutui/icons-vue-taro';
+
+const active = ref(0);
 </script>
diff --git a/src/config.json b/src/config.json
index e2756f3c3d..28662e6485 100644
--- a/src/config.json
+++ b/src/config.json
@@ -239,6 +239,7 @@
           "version": "3.0.0",
           "name": "Tabbar",
           "cName": "标签栏",
+          "setup": true,
           "desc": "标签栏",
           "author": "Drjingfubo"
         },
@@ -246,6 +247,7 @@
           "version": "3.0.0",
           "name": "TabbarItem",
           "cName": "标签栏子组件",
+          "setup": true,
           "show": false,
           "desc": "标签栏子组件",
           "author": "Drjingfubo"
diff --git a/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap b/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap
index f75a05cf64..11d8b1d3ac 100644
--- a/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap
@@ -6,6 +6,12 @@ exports[`should render fixed element when using bottom prop 1`] = `
 </div>"
 `;
 
+exports[`should render placeholder when using placeholder and bottom prop 1`] = `
+"<div class="nut-tabbar__placeholder" style="height: 40px;">
+  <view class="nut-tabbar nut-tabbar-bottom"></view>
+</div>"
+`;
+
 exports[`should render tabbar when default 1`] = `
 "<div class="" style="">
   <view class="nut-tabbar">
diff --git a/src/packages/__VUE/tabbar/__tests__/index.spec.tsx b/src/packages/__VUE/tabbar/__tests__/index.spec.tsx
index a3f7918b07..2f36134bea 100644
--- a/src/packages/__VUE/tabbar/__tests__/index.spec.tsx
+++ b/src/packages/__VUE/tabbar/__tests__/index.spec.tsx
@@ -1,12 +1,15 @@
 import { mount } from '@vue/test-utils';
 import { Tabbar, TabbarItem } from '@nutui/nutui';
-import { nextTick, h } from 'vue';
+import { nextTick, h, ref } from 'vue';
 import { Home, Category, Find } from '@nutui/icons-vue';
+import { mockGetBoundingClientRect, sleep } from '@/packages/utils/unit';
+import { useRouter } from '@/packages/utils/useRoute';
 
-// 模拟setup导入资源
-vi.mock('vue-router', () => ({
-  useRouter: vi.fn()
-}));
+vi.mock('@/packages/utils/useRoute');
+
+(useRouter as any).mockReturnValue({
+  push: vi.fn()
+});
 
 test('should render tabbar when default', async () => {
   const wrapper = mount(() => {
@@ -85,14 +88,17 @@ test('should render fixed element when using bottom prop', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 test('should match active tabbar by clcik', async () => {
-  const wrapper = mount(() => {
-    return (
-      <Tabbar unactive-color="grey" active-color="blue">
-        <TabbarItem tab-title="首页" icon={h(Home)}></TabbarItem>
-        <TabbarItem tab-title="分类" icon={h(Category)}></TabbarItem>
-        <TabbarItem tab-title="发现" icon={h(Find)}></TabbarItem>
-      </Tabbar>
-    );
+  const wrapper = mount({
+    setup() {
+      const active = ref(0);
+      return () => (
+        <Tabbar unactive-color="grey" active-color="blue" v-model={active.value}>
+          <TabbarItem tab-title="首页" icon={h(Home)}></TabbarItem>
+          <TabbarItem tab-title="分类" icon={h(Category)}></TabbarItem>
+          <TabbarItem tab-title="发现" icon={h(Find)}></TabbarItem>
+        </Tabbar>
+      );
+    }
   });
   const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
 
@@ -120,3 +126,64 @@ test('should show sure emitted when click', async () => {
   await nextTick();
   expect(tabSwitch).toBeCalled();
 });
+
+test('should render placeholder when using placeholder and bottom prop', async () => {
+  const wrapper = mount(Tabbar, {
+    props: {
+      bottom: true,
+      placeholder: true
+    }
+  });
+  mockGetBoundingClientRect({ height: 40 });
+  await sleep(500);
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should redirect when exist router and using to prop', async () => {
+  const wrapper = mount(() => {
+    return (
+      <Tabbar>
+        <TabbarItem tab-title="首页" icon={h(Home)} to="/home"></TabbarItem>
+        <TabbarItem tab-title="分类" icon={h(Category)} to="/category"></TabbarItem>
+        <TabbarItem tab-title="发现" icon={h(Find)} to="/category"></TabbarItem>
+      </Tabbar>
+    );
+  });
+  const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
+  await tabbarItem[1].trigger('click');
+  expect(useRouter().push).toHaveBeenCalledTimes(1);
+  expect(useRouter().push).toHaveBeenCalledWith('/category');
+});
+
+test('should call replace when no router exist and using to prop', async () => {
+  (useRouter as any).mockReturnValue(undefined);
+
+  const wrapper = mount(() => {
+    return (
+      <Tabbar>
+        <TabbarItem tab-title="首页" icon={h(Home)} to="/home"></TabbarItem>
+        <TabbarItem tab-title="分类" icon={h(Category)} to="/category"></TabbarItem>
+        <TabbarItem tab-title="发现" icon={h(Find)} to="/category"></TabbarItem>
+      </Tabbar>
+    );
+  });
+  location.replace = vi.fn();
+  const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
+  await tabbarItem[1].trigger('click');
+  expect(location.replace).toHaveBeenCalledWith('/category');
+});
+
+test('should set window.location.href when using href prop', async () => {
+  const wrapper = mount(() => {
+    return (
+      <Tabbar>
+        <TabbarItem tab-title="首页" icon={h(Home)} href="/home"></TabbarItem>
+        <TabbarItem tab-title="分类" icon={h(Category)} href="/category"></TabbarItem>
+        <TabbarItem tab-title="发现" icon={h(Find)} href="/find"></TabbarItem>
+      </Tabbar>
+    );
+  });
+  const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
+  await tabbarItem[1].trigger('click');
+  expect(window.location.href).toMatch('/category');
+});
diff --git a/src/packages/__VUE/tabbar/demo/basic.vue b/src/packages/__VUE/tabbar/demo/basic.vue
index 0005a0e4a2..de448c5047 100644
--- a/src/packages/__VUE/tabbar/demo/basic.vue
+++ b/src/packages/__VUE/tabbar/demo/basic.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
     <nut-tabbar-item tab-title="Home">
       <template #icon>
         <Home></Home>
@@ -29,7 +29,11 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue';
+
+const active = ref(0);
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };
diff --git a/src/packages/__VUE/tabbar/demo/check.vue b/src/packages/__VUE/tabbar/demo/check.vue
index 53ea2931dc..91a7b8bb02 100644
--- a/src/packages/__VUE/tabbar/demo/check.vue
+++ b/src/packages/__VUE/tabbar/demo/check.vue
@@ -7,34 +7,36 @@
 <script lang="ts" setup>
 import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue';
+
 const active = ref(2);
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: h(Cart),
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };
diff --git a/src/packages/__VUE/tabbar/demo/color.vue b/src/packages/__VUE/tabbar/demo/color.vue
index 36ef185eb5..9c9590cf7b 100644
--- a/src/packages/__VUE/tabbar/demo/color.vue
+++ b/src/packages/__VUE/tabbar/demo/color.vue
@@ -1,37 +1,39 @@
 <template>
-  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+  <nut-tabbar v-model="active" unactive-color="#7d7e80" active-color="#1989fa">
     <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { h } from 'vue';
+import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue';
+
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: h(Cart),
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+const active = ref(0);
 </script>
diff --git a/src/packages/__VUE/tabbar/demo/fixed.vue b/src/packages/__VUE/tabbar/demo/fixed.vue
index 4bf21f2235..d0d42a73b7 100644
--- a/src/packages/__VUE/tabbar/demo/fixed.vue
+++ b/src/packages/__VUE/tabbar/demo/fixed.vue
@@ -1,12 +1,13 @@
 <template>
-  <nut-tabbar bottom safe-area-inset-bottom placeholder>
+  <nut-tabbar v-model="active" bottom safe-area-inset-bottom placeholder>
     <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { h } from 'vue';
+import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue';
+
 const List = [
   {
     title: 'Home',
@@ -29,4 +30,5 @@ const List = [
     icon: h(My)
   }
 ];
+const active = ref(0);
 </script>
diff --git a/src/packages/__VUE/tabbar/demo/icon.vue b/src/packages/__VUE/tabbar/demo/icon.vue
index 3d505ef7e2..eb177507fb 100644
--- a/src/packages/__VUE/tabbar/demo/icon.vue
+++ b/src/packages/__VUE/tabbar/demo/icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
     <nut-tabbar-item tab-title="Home">
       <template #icon="props">
         <img :src="props.active ? icon.active : icon.unactive" alt="" />
@@ -18,10 +18,14 @@
   </nut-tabbar>
 </template>
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 const icon = {
   active: 'https://img11.360buyimg.com/imagetools/jfs/t1/70423/4/20553/3652/62e74629E23ba550e/aeeed0e3b9f43ae6.png',
   unactive: 'https://img13.360buyimg.com/imagetools/jfs/t1/23319/19/18329/3084/62e7c346E957c54ef/6c3e8a49e52b76f2.png'
 };
+const active = ref(0);
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };
diff --git a/src/packages/__VUE/tabbar/demo/name.vue b/src/packages/__VUE/tabbar/demo/name.vue
index a19f026cf4..aa9240de1b 100644
--- a/src/packages/__VUE/tabbar/demo/name.vue
+++ b/src/packages/__VUE/tabbar/demo/name.vue
@@ -8,34 +8,36 @@
 <script lang="ts" setup>
 import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue';
+
 const activeName = ref('category');
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: Cart,
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };
diff --git a/src/packages/__VUE/tabbar/demo/quantity.vue b/src/packages/__VUE/tabbar/demo/quantity.vue
index d58cbe802b..6b2bb053a2 100644
--- a/src/packages/__VUE/tabbar/demo/quantity.vue
+++ b/src/packages/__VUE/tabbar/demo/quantity.vue
@@ -1,22 +1,25 @@
 <template>
-  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-    <nut-tabbar-item tab-title="label" :value="11">
+  <nut-tabbar v-model="active" unactive-color="#7d7e80" active-color="#1989fa">
+    <nut-tabbar-item tab-title="Home" :value="11">
       <template #icon>
         <Home></Home>
       </template>
     </nut-tabbar-item>
-    <nut-tabbar-item tab-title="label" :dot="true">
+    <nut-tabbar-item tab-title="Category" :dot="true">
       <template #icon>
-        <Home></Home>
+        <Category></Category>
       </template>
     </nut-tabbar-item>
-    <nut-tabbar-item tab-title="label" :value="110">
+    <nut-tabbar-item tab-title="Find" :value="110">
       <template #icon>
-        <Home></Home>
+        <Find></Find>
       </template>
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { Home } from '@nutui/icons-vue';
+import { ref } from 'vue';
+import { Home, Category, Find } from '@nutui/icons-vue';
+
+const active = ref(0);
 </script>
diff --git a/src/packages/__VUE/tabbar/doc.en-US.md b/src/packages/__VUE/tabbar/doc.en-US.md
index ca96f065ce..89eaeb0330 100644
--- a/src/packages/__VUE/tabbar/doc.en-US.md
+++ b/src/packages/__VUE/tabbar/doc.en-US.md
@@ -88,6 +88,14 @@ The bardge logo component is used internally and its properties can be applied d
 | --- | --- | --- |
 | tab-switch | Emitted when changing active tab | item,index |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type { TabbarProps, TabbarInstance, TabbarItemProps, TabbarItemInstance } from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/tabbar/doc.md b/src/packages/__VUE/tabbar/doc.md
index a1f8917999..37ee6fb2f4 100644
--- a/src/packages/__VUE/tabbar/doc.md
+++ b/src/packages/__VUE/tabbar/doc.md
@@ -88,6 +88,14 @@ app.use(TabbarItem);
 | --- | --- | --- |
 | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type { TabbarProps, TabbarInstance, TabbarItemProps, TabbarItemInstance } from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/tabbar/doc.taro.md b/src/packages/__VUE/tabbar/doc.taro.md
index 7dd1856907..5dde382e12 100644
--- a/src/packages/__VUE/tabbar/doc.taro.md
+++ b/src/packages/__VUE/tabbar/doc.taro.md
@@ -86,6 +86,14 @@ app.use(TabbarItem);
 | --- | --- | --- |
 | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type { TabbarProps, TabbarInstance, TabbarItemProps, TabbarItemInstance } from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/tabbar/index.taro.ts b/src/packages/__VUE/tabbar/index.taro.ts
new file mode 100644
index 0000000000..55c58be1ab
--- /dev/null
+++ b/src/packages/__VUE/tabbar/index.taro.ts
@@ -0,0 +1,11 @@
+import Tabbar from './tabbar.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Tabbar);
+
+export type { TabbarProps } from './tabbar.taro.vue';
+
+export type TabbarInstance = ComponentPublicInstance & InstanceType<typeof Tabbar>;
+
+export { Tabbar, Tabbar as default };
diff --git a/src/packages/__VUE/tabbar/index.taro.vue b/src/packages/__VUE/tabbar/index.taro.vue
deleted file mode 100644
index 075173ba30..0000000000
--- a/src/packages/__VUE/tabbar/index.taro.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <view :class="{ 'nut-tabbar__placeholder': bottom && placeholder }" :style="{ height }">
-    <view
-      :id="`nut-tabbar-${refRandomId}`"
-      ref="nutTabbarRef"
-      class="nut-tabbar"
-      :class="{ 'nut-tabbar-bottom': bottom, 'nut-tabbar-safebottom': safeAreaInsetBottom }"
-    >
-      <slot></slot>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { onMounted, provide, reactive, ref, toRefs, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import Taro from '@tarojs/taro';
-import { TABBAR_KEY } from './types';
-import { useTaroRect } from '@/packages/utils/useTaroRect';
-const { create } = createComponent('tabbar');
-export default create({
-  props: {
-    modelValue: {
-      type: [Number, String],
-      default: 0
-    },
-    bottom: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: 'base'
-    },
-    size: {
-      type: String,
-      default: '20px'
-    },
-    unactiveColor: {
-      type: String,
-      default: ''
-    },
-    activeColor: {
-      type: String,
-      default: ''
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: false
-    },
-    placeholder: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['tabSwitch', 'update:modelValue'],
-  setup(props, { emit }) {
-    const refRandomId = Math.random().toString(36).slice(-8);
-    const { bottom, placeholder } = toRefs(props);
-    const height = ref('auto');
-    const mdValue = reactive({
-      val: props.modelValue,
-      children: []
-    });
-    const nutTabbarRef = ref<HTMLElement | null>(null);
-    function changeIndex(index: number, active: number | string) {
-      emit('update:modelValue', active);
-      parentData.modelValue = active;
-      emit('tabSwitch', parentData.children[index], active);
-    }
-    const parentData = reactive({
-      children: mdValue.children,
-      size: props.size,
-      modelValue: mdValue.val,
-      unactiveColor: props.unactiveColor,
-      activeColor: props.activeColor,
-      changeIndex
-    });
-    provide(TABBAR_KEY, parentData);
-    watch(
-      () => props.modelValue,
-      (value) => {
-        parentData.modelValue = value;
-      }
-    );
-    onMounted(() => {
-      if (bottom.value && placeholder.value) {
-        Taro.nextTick(() => {
-          useTaroRect(nutTabbarRef).then(
-            (rect: any) => {
-              height.value = `${rect.height}px`;
-            },
-            () => {}
-          );
-        });
-      }
-    });
-
-    return {
-      refRandomId,
-      changeIndex,
-      nutTabbarRef,
-      height
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/tabbar/index.ts b/src/packages/__VUE/tabbar/index.ts
new file mode 100644
index 0000000000..0e5c06f4e6
--- /dev/null
+++ b/src/packages/__VUE/tabbar/index.ts
@@ -0,0 +1,11 @@
+import Tabbar from './tabbar.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Tabbar);
+
+export type { TabbarProps } from './tabbar.vue';
+
+export type TabbarInstance = ComponentPublicInstance & InstanceType<typeof Tabbar>;
+
+export { Tabbar, Tabbar as default };
diff --git a/src/packages/__VUE/tabbar/index.vue b/src/packages/__VUE/tabbar/index.vue
deleted file mode 100644
index 2e3106580a..0000000000
--- a/src/packages/__VUE/tabbar/index.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div :class="{ 'nut-tabbar__placeholder': bottom && placeholder }" :style="{ height: height + 'px' }">
-    <view
-      ref="nutTabbar"
-      class="nut-tabbar"
-      :class="{ 'nut-tabbar-bottom': bottom, 'nut-tabbar-safebottom': safeAreaInsetBottom }"
-    >
-      <slot></slot>
-    </view>
-  </div>
-</template>
-
-<script lang="ts">
-import { onMounted, provide, reactive, toRefs, ref, watch, nextTick } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { TABBAR_KEY } from './types';
-const { create } = createComponent('tabbar');
-export default create({
-  props: {
-    modelValue: {
-      type: [Number, String],
-      default: 0
-    },
-    bottom: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: 'base'
-    },
-    unactiveColor: {
-      type: String,
-      default: ''
-    },
-    activeColor: {
-      type: String,
-      default: ''
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: false
-    },
-    placeholder: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['tabSwitch', 'update:modelValue'],
-  setup(props, { emit }) {
-    const { bottom, placeholder } = toRefs(props);
-    const height = ref();
-    const mdValue = reactive({
-      val: props.modelValue,
-      children: []
-    });
-    const nutTabbar = ref<HTMLElement | null>(null);
-    function changeIndex(index: number, active: number | string) {
-      emit('update:modelValue', active);
-      parentData.modelValue = active;
-      emit('tabSwitch', parentData.children[index], active);
-    }
-    const parentData = reactive({
-      children: mdValue.children,
-      modelValue: mdValue.val,
-      unactiveColor: props.unactiveColor,
-      activeColor: props.activeColor,
-      changeIndex
-    });
-    provide(TABBAR_KEY, parentData);
-    watch(
-      () => props.modelValue,
-      (value) => {
-        parentData.modelValue = value;
-      }
-    );
-    onMounted(() => {
-      if (bottom.value && placeholder.value) {
-        nextTick(() => {
-          height.value = nutTabbar?.value?.getBoundingClientRect().height;
-        });
-      }
-    });
-
-    return {
-      changeIndex,
-      nutTabbar,
-      height
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/tabbar/tabbar.taro.vue b/src/packages/__VUE/tabbar/tabbar.taro.vue
new file mode 100644
index 0000000000..df2851f784
--- /dev/null
+++ b/src/packages/__VUE/tabbar/tabbar.taro.vue
@@ -0,0 +1,81 @@
+<template>
+  <view :class="{ 'nut-tabbar__placeholder': bottom && placeholder }" :style="{ height }">
+    <view
+      :id="`nut-tabbar-${refRandomId}`"
+      ref="nutTabbarRef"
+      class="nut-tabbar"
+      :class="{ 'nut-tabbar-bottom': bottom, 'nut-tabbar-safebottom': safeAreaInsetBottom }"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import Taro from '@tarojs/taro';
+import { useTaroRect } from '@/packages/utils/useTaroRect';
+import { useChildren } from '@/packages/utils';
+import { TABBAR_KEY } from './types';
+
+defineOptions({
+  name: 'NutTabbar'
+});
+
+export type TabbarProps = Partial<{
+  modelValue: number | string;
+  bottom: boolean;
+  unactiveColor: string;
+  activeColor: string;
+  safeAreaInsetBottom: boolean;
+  placeholder: boolean;
+}>;
+
+const props = withDefaults(defineProps<TabbarProps>(), {
+  modelValue: 0,
+  bottom: false,
+  unactiveColor: '',
+  activeColor: '',
+  safeAreaInsetBottom: false,
+  placeholder: false
+});
+
+const emit = defineEmits(['tabSwitch', 'update:modelValue']);
+
+const refRandomId = Math.random().toString(36).slice(-8);
+const height = ref('auto');
+const nutTabbarRef = ref<HTMLElement | null>(null);
+const activeIndex = ref<number | string>(props.modelValue);
+
+const { children, linkChildren } = useChildren(TABBAR_KEY);
+
+const changeIndex = (index: number, active: number | string) => {
+  activeIndex.value = active;
+  emit('update:modelValue', active);
+  emit('tabSwitch', children[index], active);
+};
+
+linkChildren({ props, activeIndex, changeIndex });
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    activeIndex.value = val;
+  }
+);
+
+const updateHeight = () => {
+  if (props.bottom && props.placeholder) {
+    Taro.nextTick(() => {
+      useTaroRect(nutTabbarRef).then(
+        (rect: any) => {
+          height.value = `${rect.height}px`;
+        },
+        () => {}
+      );
+    });
+  }
+};
+
+onMounted(updateHeight);
+</script>
diff --git a/src/packages/__VUE/tabbar/tabbar.vue b/src/packages/__VUE/tabbar/tabbar.vue
new file mode 100644
index 0000000000..837e2827dd
--- /dev/null
+++ b/src/packages/__VUE/tabbar/tabbar.vue
@@ -0,0 +1,80 @@
+<template>
+  <div :class="{ 'nut-tabbar__placeholder': bottom && placeholder }" :style="{ height: height + 'px' }">
+    <view ref="nutTabbar" :class="classes">
+      <slot></slot>
+    </view>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, computed, ref, watch, nextTick } from 'vue';
+import { useChildren } from '@/packages/utils';
+import { TABBAR_KEY } from './types';
+
+defineOptions({
+  name: 'NutTabbar'
+});
+
+export type TabbarProps = Partial<{
+  modelValue: number | string;
+  bottom: boolean;
+  unactiveColor: string;
+  activeColor: string;
+  safeAreaInsetBottom: boolean;
+  placeholder: boolean;
+}>;
+
+const props = withDefaults(defineProps<TabbarProps>(), {
+  modelValue: 0,
+  bottom: false,
+  unactiveColor: '',
+  activeColor: '',
+  safeAreaInsetBottom: false,
+  placeholder: false
+});
+
+const emit = defineEmits(['tabSwitch', 'update:modelValue']);
+
+const height = ref<number | undefined>();
+const nutTabbar = ref<HTMLElement | null>(null);
+const activeIndex = ref<number | string>(props.modelValue);
+
+const classes = computed(() => {
+  const prefixCls = 'nut-tabbar';
+  return {
+    [prefixCls]: true,
+    'nut-tabbar-bottom': props.bottom,
+    'nut-tabbar-safebottom': props.safeAreaInsetBottom
+  };
+});
+
+const { children, linkChildren } = useChildren(TABBAR_KEY);
+
+const changeIndex = (index: number, active: number | string) => {
+  activeIndex.value = active;
+  emit('update:modelValue', active);
+  emit('tabSwitch', children[index], active);
+};
+
+linkChildren({ props, activeIndex, changeIndex });
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    activeIndex.value = val;
+  }
+);
+
+const updateHeight = () => {
+  if (props.bottom && props.placeholder) {
+    nextTick(() => {
+      const nutTabbarHeight = nutTabbar.value?.getBoundingClientRect().height;
+      if (nutTabbarHeight) {
+        height.value = nutTabbarHeight;
+      }
+    });
+  }
+};
+
+onMounted(updateHeight);
+</script>
diff --git a/src/packages/__VUE/tabbaritem/index.taro.ts b/src/packages/__VUE/tabbaritem/index.taro.ts
new file mode 100644
index 0000000000..825c24af18
--- /dev/null
+++ b/src/packages/__VUE/tabbaritem/index.taro.ts
@@ -0,0 +1,11 @@
+import TabbarItem from './tabbar-item.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(TabbarItem);
+
+export type { TabbarItemProps } from './tabbar-item.taro.vue';
+
+export type TabbarItemInstance = ComponentPublicInstance & InstanceType<typeof TabbarItem>;
+
+export { TabbarItem, TabbarItem as default };
diff --git a/src/packages/__VUE/tabbaritem/index.taro.vue b/src/packages/__VUE/tabbaritem/index.taro.vue
deleted file mode 100644
index 5074661900..0000000000
--- a/src/packages/__VUE/tabbaritem/index.taro.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <view
-    class="nut-tabbar-item"
-    :class="{ 'nut-tabbar-item__icon--unactive': !active }"
-    :style="{
-      color: active ? state.activeColor : state.unactiveColor
-    }"
-    @click="change()"
-  >
-    <nut-badge v-bind="$attrs">
-      <view class="nut-tabbar-item_icon-box">
-        <div v-if="isHaveSlot('icon')" class="nut-tabbar-item_icon-box_icon">
-          <slot name="icon" :active="active"></slot>
-        </div>
-        <view v-if="icon && !isHaveSlot('icon')">
-          <component :is="renderIcon(icon)" class="nut-popover-item-img"></component>
-        </view>
-
-        <view
-          :class="[
-            'nut-tabbar-item_icon-box_nav-word',
-            { 'nut-tabbar-item_icon-box_big-word': !icon && !isHaveSlot('icon') }
-          ]"
-        >
-          <slot>
-            <view v-if="tabTitle">{{ tabTitle }}</view>
-          </slot>
-        </view>
-      </view>
-    </nut-badge>
-  </view>
-</template>
-<script lang="ts">
-import { createComponent, renderIcon } from '@/packages/utils/create';
-import { Component, ComponentInternalInstance, computed, PropType, getCurrentInstance, inject, reactive } from 'vue';
-import NutBadge from '../badge/index.taro.vue';
-import { TABBAR_KEY } from '../tabbar/types';
-const { create } = createComponent('tabbar-item');
-export default create({
-  components: {
-    NutBadge
-  },
-  props: {
-    tabTitle: {
-      // 标签页的标题
-      type: String,
-      default: ''
-    },
-    name: {
-      type: String
-    },
-    icon: {
-      // 标签页显示的icon
-      type: Object as PropType<Component>
-    },
-    href: {
-      // 标签页的跳转链接
-      type: String,
-      default: ''
-    }
-  },
-  setup(props, { slots }) {
-    const isHaveSlot = (slot: string) => {
-      return slots[slot];
-    };
-    const parent: any = inject(TABBAR_KEY);
-    const state = reactive({
-      unactiveColor: parent.unactiveColor, // 未选中的颜色
-      activeColor: parent.activeColor, // 选中的颜色
-      active: parent.modelValue, // 是否选中
-      index: 0
-    });
-    const relation = (child: ComponentInternalInstance): void => {
-      if (child.proxy) {
-        parent.children.push(child.proxy);
-        const index = parent.children.indexOf(child.proxy);
-        state.index = props.name ?? index;
-      }
-    };
-    relation(getCurrentInstance() as ComponentInternalInstance);
-    const active = computed(() => state.index === parent.modelValue);
-    function change() {
-      let key = props.name ?? state.index;
-      let indexValue = null;
-      if (props.name) {
-        indexValue = parent.children.findIndex((item: { name: string | number }) => {
-          return item.name == key;
-        });
-      }
-      parent.changeIndex(indexValue ?? key, state.index);
-    }
-    return {
-      state,
-      active,
-      isHaveSlot,
-      renderIcon,
-      change
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/tabbaritem/index.ts b/src/packages/__VUE/tabbaritem/index.ts
new file mode 100644
index 0000000000..bd92e57e4e
--- /dev/null
+++ b/src/packages/__VUE/tabbaritem/index.ts
@@ -0,0 +1,11 @@
+import TabbarItem from './tabbar-item.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(TabbarItem);
+
+export type { TabbarItemProps } from './tabbar-item.vue';
+
+export type TabbarItemInstance = ComponentPublicInstance & InstanceType<typeof TabbarItem>;
+
+export { TabbarItem, TabbarItem as default };
diff --git a/src/packages/__VUE/tabbaritem/index.vue b/src/packages/__VUE/tabbaritem/index.vue
deleted file mode 100644
index b78bb10ad2..0000000000
--- a/src/packages/__VUE/tabbaritem/index.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div
-    class="nut-tabbar-item"
-    :class="{ 'nut-tabbar-item__icon--unactive': !active }"
-    :style="{
-      color: active ? state.activeColor : state.unactiveColor
-    }"
-    @click="change()"
-  >
-    <nut-badge v-bind="$attrs">
-      <view class="nut-tabbar-item_icon-box">
-        <div v-if="isHaveSlot('icon')" class="nut-tabbar-item_icon-box_icon">
-          <slot name="icon" :active="active"></slot>
-        </div>
-        <view v-if="icon && !isHaveSlot('icon')">
-          <component :is="renderIcon(icon)" class="nut-popover-item-img"></component>
-        </view>
-
-        <view
-          :class="[
-            'nut-tabbar-item_icon-box_nav-word',
-            { 'nut-tabbar-item_icon-box_big-word': !icon && !isHaveSlot('icon') }
-          ]"
-        >
-          <slot>
-            <view v-if="tabTitle">{{ tabTitle }}</view>
-          </slot>
-        </view>
-      </view>
-    </nut-badge>
-  </div>
-</template>
-<script lang="ts">
-import { createComponent, renderIcon } from '@/packages/utils/create';
-import { useRouter } from '@/packages/utils/useRoute';
-import NutBadge from '../badge/index.vue';
-import { Component, ComponentInternalInstance, computed, getCurrentInstance, inject, reactive, PropType } from 'vue';
-import { TABBAR_KEY } from '../tabbar/types';
-const { create } = createComponent('tabbar-item');
-export default create({
-  components: { NutBadge },
-  props: {
-    tabTitle: {
-      // 标签页的标题
-      type: String,
-      default: ''
-    },
-    name: {
-      type: String
-    },
-    icon: {
-      // 标签页显示的icon
-      type: Object as PropType<Component>
-    },
-    href: {
-      // 标签页的跳转链接
-      type: String,
-      default: ''
-    },
-    to: [Object, String]
-  },
-  setup(props, { slots }) {
-    const isHaveSlot = (slot: string) => {
-      return slots[slot];
-    };
-    const parent: any = inject(TABBAR_KEY);
-    const state = reactive({
-      unactiveColor: parent.unactiveColor, // 未选中的颜色
-      activeColor: parent.activeColor, // 选中的颜色
-      index: 0
-    });
-    const router = useRouter();
-    const relation = (child: ComponentInternalInstance): void => {
-      if (child.proxy) {
-        parent.children.push(child.proxy);
-        const index = parent.children.indexOf(child.proxy);
-        state.index = props.name ?? index;
-      }
-    };
-    relation(getCurrentInstance() as ComponentInternalInstance);
-    const active = computed(() => state.index === parent.modelValue);
-
-    function change() {
-      let key = props.name ?? state.index;
-      let indexValue = null;
-      if (props.name) {
-        indexValue = parent.children.findIndex((item: { name: string | number }) => {
-          return item.name == key;
-        });
-      }
-      parent.changeIndex(indexValue ?? key, state.index);
-      let index = indexValue ?? key;
-      if (parent.children[index]?.href) {
-        window.location.href = parent.children[index].href;
-        return;
-      }
-      if (parent.children[index]?.to) {
-        let to = parent.children[index].to;
-        if (to && router) {
-          router.push(to);
-        } else {
-          location.replace(to);
-        }
-      }
-    }
-    return {
-      state,
-      active,
-      renderIcon,
-      isHaveSlot,
-      change
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue b/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue
new file mode 100644
index 0000000000..239928dfda
--- /dev/null
+++ b/src/packages/__VUE/tabbaritem/tabbar-item.taro.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="nut-tabbar-item"
+    :class="{ 'nut-tabbar-item__icon--unactive': !active }"
+    :style="{
+      color: activeColor
+    }"
+    @click="change"
+  >
+    <nut-badge v-bind="$attrs">
+      <view class="nut-tabbar-item_icon-box">
+        <div v-if="isHaveSlot('icon')" class="nut-tabbar-item_icon-box_icon">
+          <slot name="icon" :active="active"></slot>
+        </div>
+        <view v-if="icon && !isHaveSlot('icon')">
+          <component :is="renderIcon(icon)" class="nut-popover-item-img"></component>
+        </view>
+
+        <view
+          :class="[
+            'nut-tabbar-item_icon-box_nav-word',
+            { 'nut-tabbar-item_icon-box_big-word': !icon && !isHaveSlot('icon') }
+          ]"
+        >
+          <slot>
+            <view v-if="tabTitle">{{ tabTitle }}</view>
+          </slot>
+        </view>
+      </view>
+    </nut-badge>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { renderIcon } from '@/packages/utils/create';
+import { useRouter } from '@/packages/utils/useRoute';
+import { useParent } from '@/packages/utils';
+import { TABBAR_KEY } from '../tabbar/types';
+import NutBadge from '../badge/index.vue';
+
+defineOptions({
+  name: 'NutTabbarItem'
+});
+
+export type TabbarItemProps = Partial<{
+  tabTitle: string;
+  name: string;
+  icon: any;
+  href: string;
+  to: string | Record<never, any>;
+}>;
+
+const props = withDefaults(defineProps<TabbarItemProps>(), {
+  tabTitle: '',
+  href: ''
+});
+
+const slots = useSlots();
+const router = useRouter();
+const { parent, index } = useParent(TABBAR_KEY);
+
+const active = computed(() => (props.name ?? index.value) === parent.activeIndex.value);
+const activeColor = computed(() => (active.value ? parent.props.activeColor : parent.props.unactiveColor));
+
+const isHaveSlot = (slot: string) => {
+  return slots[slot];
+};
+
+const change = () => {
+  const key = props.name ?? index.value;
+  parent.changeIndex(index.value, key);
+
+  if (parent.children[index.value]?.href) {
+    window.location.href = parent.children[index.value].href;
+    return;
+  }
+
+  if (parent.children[index.value]?.to) {
+    const to = parent.children[index.value].to;
+    if (to && router) {
+      router.push(to);
+    } else {
+      location.replace(to);
+    }
+  }
+};
+</script>
diff --git a/src/packages/__VUE/tabbaritem/tabbar-item.vue b/src/packages/__VUE/tabbaritem/tabbar-item.vue
new file mode 100644
index 0000000000..239928dfda
--- /dev/null
+++ b/src/packages/__VUE/tabbaritem/tabbar-item.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="nut-tabbar-item"
+    :class="{ 'nut-tabbar-item__icon--unactive': !active }"
+    :style="{
+      color: activeColor
+    }"
+    @click="change"
+  >
+    <nut-badge v-bind="$attrs">
+      <view class="nut-tabbar-item_icon-box">
+        <div v-if="isHaveSlot('icon')" class="nut-tabbar-item_icon-box_icon">
+          <slot name="icon" :active="active"></slot>
+        </div>
+        <view v-if="icon && !isHaveSlot('icon')">
+          <component :is="renderIcon(icon)" class="nut-popover-item-img"></component>
+        </view>
+
+        <view
+          :class="[
+            'nut-tabbar-item_icon-box_nav-word',
+            { 'nut-tabbar-item_icon-box_big-word': !icon && !isHaveSlot('icon') }
+          ]"
+        >
+          <slot>
+            <view v-if="tabTitle">{{ tabTitle }}</view>
+          </slot>
+        </view>
+      </view>
+    </nut-badge>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { renderIcon } from '@/packages/utils/create';
+import { useRouter } from '@/packages/utils/useRoute';
+import { useParent } from '@/packages/utils';
+import { TABBAR_KEY } from '../tabbar/types';
+import NutBadge from '../badge/index.vue';
+
+defineOptions({
+  name: 'NutTabbarItem'
+});
+
+export type TabbarItemProps = Partial<{
+  tabTitle: string;
+  name: string;
+  icon: any;
+  href: string;
+  to: string | Record<never, any>;
+}>;
+
+const props = withDefaults(defineProps<TabbarItemProps>(), {
+  tabTitle: '',
+  href: ''
+});
+
+const slots = useSlots();
+const router = useRouter();
+const { parent, index } = useParent(TABBAR_KEY);
+
+const active = computed(() => (props.name ?? index.value) === parent.activeIndex.value);
+const activeColor = computed(() => (active.value ? parent.props.activeColor : parent.props.unactiveColor));
+
+const isHaveSlot = (slot: string) => {
+  return slots[slot];
+};
+
+const change = () => {
+  const key = props.name ?? index.value;
+  parent.changeIndex(index.value, key);
+
+  if (parent.children[index.value]?.href) {
+    window.location.href = parent.children[index.value].href;
+    return;
+  }
+
+  if (parent.children[index.value]?.to) {
+    const to = parent.children[index.value].to;
+    if (to && router) {
+      router.push(to);
+    } else {
+      location.replace(to);
+    }
+  }
+};
+</script>
diff --git a/src/packages/utils/useRelation/useParent.ts b/src/packages/utils/useRelation/useParent.ts
index 0a800a670c..eaaf07d9a9 100644
--- a/src/packages/utils/useRelation/useParent.ts
+++ b/src/packages/utils/useRelation/useParent.ts
@@ -1,14 +1,23 @@
-import { getCurrentInstance, inject, onUnmounted } from 'vue';
+import { getCurrentInstance, computed, inject, onUnmounted } from 'vue';
 
 export const useParent = (key: symbol) => {
   const parent = inject<any>(key, null);
+
   if (parent) {
     const instance = getCurrentInstance()!;
-    const { link, unlink } = parent;
+    const { link, unlink, internalChildren } = parent;
+
     link(instance);
     onUnmounted(() => {
       unlink(instance);
     });
+    const index = computed(() => internalChildren.indexOf(instance));
+
+    return { parent, index };
   }
-  return { parent };
+
+  return {
+    parent,
+    index: computed(() => -1)
+  };
 };