refactor(Sidebar): refactor with composition api

src/sidebar-item/index.js

@@ -1,53 +1,50 @@
+import { ref, computed } from 'vue';
 import { createNamespace } from '../utils';
-import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
+import { useParent } from '../api/use-relation';
+import { SIDEBAR_KEY } from '../sidebar';
 import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('sidebar-item');
 
 export default createComponent({
-  mixins: [ChildrenMixin('vanSidebar')],
-
-  emits: ['click'],
-
   props: {
     ...routeProps,
     dot: Boolean,
-    badge: [Number, String],
     title: String,
+    badge: [Number, String],
     disabled: Boolean,
   },
 
-  computed: {
-    select() {
-      return this.index === +this.parent.modelValue;
-    },
-  },
+  emits: ['click'],
 
-  methods: {
-    onClick() {
-      if (this.disabled) {
-        return;
-      }
+  setup(props, { emit }) {
+    const { parent, index } = useParent(SIDEBAR_KEY, ref());
 
-      this.$emit('click', this.index);
-      this.parent.$emit('update:modelValue', this.index);
-      this.parent.setIndex(this.index);
-      route(this.$router, this);
-    },
-  },
+    const selected = computed(() => index.value === +parent.active.value);
 
-  render() {
-    return (
-      <a
-        class={bem({ select: this.select, disabled: this.disabled })}
-        onClick={this.onClick}
-      >
-        <div class={bem('text')}>
-          {this.title}
-          <Badge dot={this.dot} badge={this.badge} class={bem('badge')} />
-        </div>
-      </a>
-    );
+    return (vm) => {
+      const { dot, badge, title, disabled } = props;
+
+      const onClick = () => {
+        if (disabled) {
+          return;
+        }
+
+        emit('click', index.value);
+        parent.emit('update:modelValue', index.value);
+        parent.setIndex(index.value);
+        route(vm.$router, vm);
+      };
+
+      return (
+        <a class={bem({ select: selected.value, disabled })} onClick={onClick}>
+          <div class={bem('text')}>
+            {title}
+            <Badge dot={dot} badge={badge} class={bem('badge')} />
+          </div>
+        </a>
+      );
+    };
   },
 });