refactor(Tabbar): refactor with composition api

src/tabbar-item/index.js

@@ -1,9 +1,12 @@
+import { computed, getCurrentInstance } from 'vue';
+import { TABBAR_KEY } from '../tabbar';
+
 // Utils
 import { createNamespace, isObject, isDef } from '../utils';
-import { route, routeProps } from '../composition/use-route';
 
-// Mixins
-import { ChildrenMixin } from '../mixins/relation';
+// Composition
+import { useParent } from '../composition/use-relation';
+import { routeProps, useRoute } from '../composition/use-route';
 
 // Components
 import Icon from '../icon';
@@ -12,8 +15,6 @@ import Badge from '../badge';
 const [createComponent, bem] = createNamespace('tabbar-item');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanTabbar')],
-
   props: {
     ...routeProps,
     dot: Boolean,
@@ -25,57 +26,62 @@ export default createComponent({
 
   emits: ['click'],
 
-  data() {
-    return {
-      active: false,
-    };
-  },
+  setup(props, { emit, slots }) {
+    const route = useRoute();
+    const vm = getCurrentInstance().proxy;
+    const { parent, index } = useParent(TABBAR_KEY);
 
-  computed: {
-    routeActive() {
-      const { to, $route } = this;
-      if (to && $route) {
+    const active = computed(() => {
+      const { $route } = vm;
+      const { route, modelValue } = parent.props;
+
+      if (route && $route) {
+        const { to } = props;
         const config = isObject(to) ? to : { path: to };
         const pathMatched = config.path === $route.path;
         const nameMatched = isDef(config.name) && config.name === $route.name;
 
         return pathMatched || nameMatched;
       }
-    },
-  },
 
-  methods: {
-    onClick(event) {
-      this.parent.onChange(this.name || this.index);
-      this.$emit('click', event);
-      route(this.$router, this);
-    },
+      return (props.name || index.value) === modelValue;
+    });
 
-    genIcon(active) {
-      if (this.$slots.icon) {
-        return this.$slots.icon({ active });
+    const onClick = (event) => {
+      parent.setActive(props.name || index.value);
+      emit('click', event);
+      route();
+    };
+
+    const renderIcon = () => {
+      if (slots.icon) {
+        return slots.icon({ active: active.value });
       }
-
-      if (this.icon) {
-        return <Icon name={this.icon} classPrefix={this.iconPrefix} />;
+      if (props.icon) {
+        return <Icon name={props.icon} classPrefix={props.iconPrefix} />;
       }
-    },
-  },
+    };
 
-  render() {
-    const active = this.parent.route ? this.routeActive : this.active;
-    const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
+    return () => {
+      const { dot, badge } = props;
+      const { activeColor, inactiveColor } = parent.props;
+      const color = active.value ? activeColor : inactiveColor;
 
-    return (
-      <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
-        <div class={bem('icon')}>
-          {this.genIcon(active)}
-          <Badge dot={this.dot} badge={this.badge} />
+      return (
+        <div
+          class={bem({ active: active.value })}
+          style={{ color }}
+          onClick={onClick}
+        >
+          <div class={bem('icon')}>
+            {renderIcon()}
+            <Badge dot={dot} badge={badge} />
+          </div>
+          <div class={bem('text')}>
+            {slots.default?.({ active: active.value })}
+          </div>
         </div>
-        <div class={bem('text')}>
-          {this.$slots.default ? this.$slots.default({ active }) : null}
-        </div>
-      </div>
-    );
+      );
+    };
   },
 });