[new feature] Tabbar: use relation mixin

packages/mixins/relation.js

@@ -15,7 +15,12 @@ export function ChildrenMixin(parent) {
     created() {
       const { children } = this.parent;
       const index = this.parent.slots().indexOf(this.$vnode);
-      children.splice(index === -1 ? children.length : index, 0, this);
+
+      if (index === -1) {
+        children.push(this);
+      } else {
+        children.splice(index, 0, this);
+      }
     },
 
     beforeDestroy() {

packages/tabbar-item/index.js

@@ -2,10 +2,13 @@ import { use } from '../utils';
 import Icon from '../icon';
 import Info from '../info';
 import { route, routeProps } from '../utils/router';
+import { ChildrenMixin } from '../mixins/relation';
 
 const [sfc, bem] = use('tabbar-item');
 
 export default sfc({
+  mixins: [ChildrenMixin('vanTabbar')],
+
   props: {
     ...routeProps,
     icon: String,
@@ -19,17 +22,9 @@ export default sfc({
     };
   },
 
-  beforeCreate() {
-    this.$parent.items.push(this);
-  },
-
-  destroyed() {
-    this.$parent.items.splice(this.$parent.items.indexOf(this), 1);
-  },
-
   methods: {
     onClick(event) {
-      this.$parent.onChange(this.$parent.items.indexOf(this));
+      this.parent.onChange(this.index);
       this.$emit('click', event);
       route(this.$router, this);
     }
@@ -37,7 +32,7 @@ export default sfc({
 
   render(h) {
     const { icon, slots, active } = this;
-    const color = this.$parent[active ? 'activeColor' : 'inactiveColor'];
+    const color = this.parent[active ? 'activeColor' : 'inactiveColor'];
 
     return (
       <div class={bem({ active })} style={{ color }} onClick={this.onClick}>

packages/tabbar/index.js

@@ -1,13 +1,10 @@
 import { use } from '../utils';
+import { ParentMixin } from '../mixins/relation';
 
 const [sfc, bem] = use('tabbar');
 
 export default sfc({
-  data() {
-    return {
-      items: []
-    };
-  },
+  mixins: [ParentMixin('vanTabbar')],
 
   props: {
     value: Number,
@@ -25,7 +22,7 @@ export default sfc({
   },
 
   watch: {
-    items() {
+    children() {
       this.setActiveItem();
     },
 
@@ -36,7 +33,7 @@ export default sfc({
 
   methods: {
     setActiveItem() {
-      this.items.forEach((item, index) => {
+      this.children.forEach((item, index) => {
         item.active = index === this.value;
       });
     },