[improvement] extract relation mixin

packages/dropdown-item/index.js

@@ -2,34 +2,25 @@ import { use, isDef } from '../utils';
 import Cell from '../cell';
 import Icon from '../icon';
 import Popup from '../popup';
+import { ChildrenMixin } from '../mixins/relation';
 
 const [sfc, bem] = use('dropdown-item');
 
 export default sfc({
+  mixins: [ChildrenMixin('vanDropdownMenu')],
+
   props: {
     value: null,
     title: String,
     options: Array
   },
 
-  inject: ['vanDropdownMenu'],
-
   data() {
     return {
       show: false
     };
   },
 
-  created() {
-    const { items } = this.vanDropdownMenu;
-    const index = this.vanDropdownMenu.slots().indexOf(this.$vnode);
-    items.splice(index === -1 ? items.length : index, 0, this);
-  },
-
-  beforeDestroy() {
-    this.vanDropdownMenu.items = this.vanDropdownMenu.items.filter(item => item !== this);
-  },
-
   computed: {
     displayTitle() {
       if (this.title) {
@@ -48,7 +39,7 @@ export default sfc({
   },
 
   render(h) {
-    const { top, zIndex, activeColor } = this.vanDropdownMenu;
+    const { top, zIndex, activeColor } = this.parent;
 
     const Options = this.options.map(option => {
       const active = option.value === this.value;

packages/dropdown-menu/index.js

@@ -1,9 +1,12 @@
 import { use } from '../utils';
 import { BLUE } from '../utils/color';
+import { ParentMixin } from '../mixins/relation';
 
 const [sfc, bem] = use('dropdown-menu');
 
 export default sfc({
+  mixins: [ParentMixin('vanDropdownMenu')],
+
   props: {
     zIndex: {
       type: Number,
@@ -15,16 +18,9 @@ export default sfc({
     }
   },
 
-  provide() {
-    return {
-      vanDropdownMenu: this
-    };
-  },
-
   data() {
     return {
-      top: 0,
-      items: []
+      top: 0
     };
   },
 
@@ -34,7 +30,7 @@ export default sfc({
       const rect = menu.getBoundingClientRect();
       this.top = rect.y + rect.height;
 
-      this.items.forEach((item, index) => {
+      this.children.forEach((item, index) => {
         if (index === active) {
           item.toggle();
         } else {
@@ -45,7 +41,7 @@ export default sfc({
   },
 
   render(h) {
-    const Titles = this.items.map((item, index) => (
+    const Titles = this.children.map((item, index) => (
       <div
         class={bem('item')}
         onClick={() => {

packages/mixins/relation.js

@@ -0,0 +1,37 @@
+export function ChildrenMixin(parent) {
+  return {
+    inject: [parent],
+
+    computed: {
+      parent() {
+        return this[parent];
+      }
+    },
+
+    created() {
+      const { children } = this.parent;
+      const index = this.parent.slots().indexOf(this.$vnode);
+      children.splice(index === -1 ? children.length : index, 0, this);
+    },
+
+    beforeDestroy() {
+      this.parent.children = this.parent.children.filter(item => item !== this);
+    }
+  };
+}
+
+export function ParentMixin(parent) {
+  return {
+    provide() {
+      return {
+        [parent]: this
+      };
+    },
+
+    data() {
+      return {
+        children: []
+      };
+    }
+  };
+}