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

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() {
+  emits: ['change', 'update:modelValue'],
-    return {
-      index: +this.modelValue,
-    };
-  },
 
-  watch: {
+  setup(props, { emit, slots }) {
-    modelValue() {
+    const children = ref([]);
-      this.setIndex(+this.modelValue);
+    const index = ref(+props.modelValue);
-    },
+    const active = computed(() => props.modelValue);
-  },
 
-  methods: {
+    const setIndex = (value) => {
-    setIndex(index) {
+      if (value !== index.value) {
-      if (index !== this.index) {
+        index.value = value;
-        this.index = index;
+        emit('change', value);
-        this.$emit('change', index);
       }
-    },
+    };
-  },
 
-  render() {
+    watch(active, (val) => {
-    return <div class={bem()}>{this.$slots.default?.()}</div>;
+      setIndex(+val);
+    });
+
+    provide(SIDEBAR_KEY, {
+      emit,
+      active,
+      children,
+      setIndex,
+    });
+
+    return () => <div class={bem()}>{slots.default?.()}</div>;
   },
 });