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) {
+  setup(props, { emit }) {
+    const { parent, index } = useParent(SIDEBAR_KEY, ref());
+
+    const selected = computed(() => index.value === +parent.active.value);
+
+    return (vm) => {
+      const { dot, badge, title, disabled } = props;
+
+      const onClick = () => {
+        if (disabled) {
           return;
         }
 
-      this.$emit('click', this.index);
-      this.parent.$emit('update:modelValue', this.index);
-      this.parent.setIndex(this.index);
-      route(this.$router, this);
-    },
-  },
+        emit('click', index.value);
+        parent.emit('update:modelValue', index.value);
+        parent.setIndex(index.value);
+        route(vm.$router, vm);
+      };
 
-  render() {
       return (
-      <a
-        class={bem({ select: this.select, disabled: this.disabled })}
-        onClick={this.onClick}
-      >
+        <a class={bem({ select: selected.value, disabled })} onClick={onClick}>
           <div class={bem('text')}>
-          {this.title}
-          <Badge dot={this.dot} badge={this.badge} class={bem('badge')} />
+            {title}
+            <Badge dot={dot} badge={badge} class={bem('badge')} />
           </div>
         </a>
       );
+    };
   },
 });

src/sidebar/index.js

@@ -1,13 +1,11 @@
+import { ref, watch, provide, computed } from 'vue';
 import { createNamespace } from '../utils';
-import { ParentMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('sidebar');
 
+export const SIDEBAR_KEY = 'vanSidebar';
+
 export default createComponent({
-  mixins: [ParentMixin('vanSidebar')],
-
-  emits: ['change', 'update:modelValue'],
-
   props: {
     modelValue: {
       type: [Number, String],
@@ -15,28 +13,31 @@ export default createComponent({
     },
   },
 
-  data() {
-    return {
-      index: +this.modelValue,
-    };
-  },
+  emits: ['change', 'update:modelValue'],
 
-  watch: {
-    modelValue() {
-      this.setIndex(+this.modelValue);
-    },
-  },
+  setup(props, { emit, slots }) {
+    const children = ref([]);
+    const index = ref(+props.modelValue);
+    const active = computed(() => props.modelValue);
 
-  methods: {
-    setIndex(index) {
-      if (index !== this.index) {
-        this.index = index;
-        this.$emit('change', index);
+    const setIndex = (value) => {
+      if (value !== index.value) {
+        index.value = value;
+        emit('change', value);
       }
-    },
-  },
+    };
 
-  render() {
-    return <div class={bem()}>{this.$slots.default?.()}</div>;
+    watch(active, (val) => {
+      setIndex(+val);
+    });
+
+    provide(SIDEBAR_KEY, {
+      emit,
+      active,
+      children,
+      setIndex,
+    });
+
+    return () => <div class={bem()}>{slots.default?.()}</div>;
   },
 });