[improvement] Sidebar: use relation mixin

packages/mixins/relation.js

@@ -5,6 +5,10 @@ export function ChildrenMixin(parent) {
     computed: {
       parent() {
         return this[parent];
+      },
+
+      index() {
+        return this.parent.children.indexOf(this);
       }
     },
 

packages/sidebar-item/index.js

@@ -1,43 +1,28 @@
 import { use } from '../utils';
 import Info from '../info';
+import { ChildrenMixin } from '../mixins/relation';
 
 const [sfc, bem] = use('sidebar-item');
 
 export default sfc({
+  mixins: [ChildrenMixin('vanSidebar')],
+
   props: {
     url: String,
     info: [String, Number],
     title: String
   },
 
-  inject: ['vanSidebar'],
-
-  created() {
-    this.parent.items.push(this);
-  },
-
-  beforeDestroy() {
-    this.parent.items = this.parent.items.filter(item => item !== this);
-  },
-
   computed: {
-    parent() {
-      if (process.env.NODE_ENV !== 'production' && !this.vanSidebar) {
-        console.error('[Vant] SidebarItem needs to be child of Sidebar');
-      }
-      return this.vanSidebar;
-    },
-
     select() {
-      return this.parent.items.indexOf(this) === +this.parent.activeKey;
+      return this.index === +this.parent.activeKey;
     }
   },
 
   methods: {
     onClick() {
-      const index = this.parent.items.indexOf(this);
+      this.$emit('click', this.index);
-      this.$emit('click', index);
+      this.parent.$emit('change', this.index);
-      this.parent.$emit('change', index);
     }
   },
 

packages/sidebar/index.js

@@ -1,8 +1,11 @@
 import { use } from '../utils';
+import { ParentMixin } from '../mixins/relation';
 
 const [sfc, bem] = use('sidebar');
 
 export default sfc({
+  mixins: [ParentMixin('vanSidebar')],
+
   props: {
     activeKey: {
       type: [Number, String],
@@ -10,18 +13,6 @@ export default sfc({
     }
   },
 
-  provide() {
-    return {
-      vanSidebar: this
-    };
-  },
-
-  data() {
-    return {
-      items: []
-    };
-  },
-
   render(h) {
     return <div class={[bem(), 'van-hairline--top-bottom']}>{this.slots()}</div>;
   }