fix: tab's props not observable

packages/checkbox/index.vue

@@ -84,8 +84,7 @@ export default {
     },
 
     isChecked() {
-      const currentValue = this.currentValue;
-      console.log('this.currentValue:', this.currentValue);
+      const { currentValue } = this;
       if ({}.toString.call(currentValue) === '[object Boolean]') {
         return currentValue;
       } else if (currentValue !== null && currentValue !== undefined) {

packages/tab/index.vue

@@ -1,35 +1,51 @@
 <template>
-  <div class="van-tab__pane" :class="classNames">
+  <div :class="['van-tab__pane', { 'van-tab__pane--select': key === $parent.curActive }]">
     <slot></slot>
   </div>
 </template>
 
 <script>
+import findParent from '../mixins/findParent';
+
 export default {
   name: 'van-tab',
+
+  mixins: [findParent],
+
   props: {
-    // 选项卡头显示文字
     title: {
       type: String,
       required: true
     },
     disabled: Boolean
   },
-  data() {
-    const nextIndex = this.$parent.tabs.length;
-    this.$parent.tabs.push({
-      title: this.title,
-      disabled: this.disabled,
-      index: nextIndex
-    });
 
+  data() {
+    this.findParentByComponentName('van-tabs');
+    const nextIndex = this.parentGroup.tabs.length;
+    this.updateParentData(nextIndex);
     return {
       key: nextIndex
     };
   },
-  computed: {
-    classNames() {
-      return { 'van-tab__pane--select': this.key === this.$parent.curActive };
+
+  watch: {
+    title() {
+      this.updateParentData();
+    },
+    disabled() {
+      this.updateParentData();
+    }
+  },
+
+  methods: {
+    updateParentData(nextIndex) {
+      const index = arguments.length ? nextIndex : this.key;
+      this.parentGroup.tabs.splice(index, 1, {
+        title: this.title,
+        disabled: this.disabled,
+        index
+      });
     }
   }
 };

packages/tabs/index.vue

@@ -8,9 +8,9 @@
             v-for="(tab, index) in tabs"
             :key="index"
             class="van-tab van-hairline"
-            :class="{'van-tab--active': index === curActive}"
+            :class="{ 'van-tab--active': index === curActive }"
             ref="tabkey"
-            @click="handleTabClick(index, tab)"
+            @click="handleTabClick(index)"
           >
             {{ tab.title }}
           </div>
@@ -27,9 +27,9 @@
         v-for="(tab, index) in tabs"
         :key="index"
         class="van-tab van-hairline"
-        :class="{'van-tab--active': index === curActive}"
+        :class="{ 'van-tab--active': index === curActive }"
         ref="tabkey"
-        @click="handleTabClick(index, tab)"
+        @click="handleTabClick(index)"
       >
         {{ tab.title }}
       </div>
@@ -134,14 +134,8 @@
     },
 
     methods: {
-      /**
-       * tab点击事件
-       *
-       * @param {number} index tab在tabs中的索引
-       * @param {Object} el tab的vue实例
-       */
-      handleTabClick(index, el) {
-        if (el.disabled) {
+      handleTabClick(index) {
+        if (this.tabs[index].disabled) {
           this.$emit('disabled', index);
           return;
         }