vue專案開發的tabs切換會有遇到一些坑。

常見的v-show的失效。還有正常兄弟元件傳值監聽不到值變化問題。

失效可以用v-if代替，但是v-if是沒有切換時候不會渲染元件。這就造成了正常兩個原有tab內元件不會按照常規的兄弟傳值來進行。

解決方案也很簡單，直接在mounted內賦值即可，要注意的是不要在created鉤子內，此時資料還沒載入完，也是會傳遞不上的。

參考程式碼：父元件info.vue

<el-tabs type="card" v-model="activeName" ref="tabs" class="info-tab"> 
<el-tab-pane label="
 
受理單" name="shoulidan" key="shoulidan">
      <customApply
        @showWorkOrderPage="showWorkOrderPage"
        :info="info"
      ></customApply>
    </el-tab-pane>
    <el-tab-pane
      v-if="activeName === 'gongdan'"
      label="工單"
      name="gongdan"
      key="gongdan
 
"
    >
      <workOrderLog
        v-show="activeName === 'gongdan'"
        :info="info"
        :subobj="subobj"
      ></workOrderLog>
    </el-tab-pane>
  </el-tabs>

兄弟元件：提交前輸入tab1：

      <el-row v-if="this.form.busiTypeId == '2'">
        <el-col :span="10">
          <el-form-item label="
 
投訴型別">
            <el-cascader
              v-model="form.complainType"
              :options="options"
              clearable
              @change="fnChangeOpt"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>

onSubmit() {
      var obj = {
        sourceType: this.info.callType, // 電話來源ID0 入呼，1 外呼
        dialogId: this.info.dialogId, // 會話ID
        customId: this.info.customid, // 客戶ID - 第一次沒有  往後返回 id 後端是小寫 這裡注意
        contactId: this.info.contactId, // 會話客戶資訊ID
      };
      // let params = {};
      Object.assign(obj, this.form);
      this.$axios
        .post(this.$apis.ccweb.newDataSL.insertAcceptInfo, obj)
        .then((res) => {
          console.log(res);
          this.form.id = res.data.id;
          this.$emit("showWorkOrderPage", res.data);
        });
    },

接收回顯的兄弟元件：tab2

 <el-row class="overTab">
        <el-col :span="10">
          <el-form-item label="投訴型別">
            <el-cascader
              v-model="form.complainType"
              :options="workoptions"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="投訴等級">
            <el-cascader
              v-model="form.compLevelId"
              :options="compLevel"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>

這裡常規傳值監聽（後面要換方式）

watch: {
    subobj: function (n, o) {
      // console.log("兄弟元件傳來了資料：", this.subobj, this.info);
      this.form = this.subobj;
      console.log("parentobj:", this.parentObj);
      this.formatTreeDate(this.form);
    },
  },

使用v-if後這種傳值就失效了，需要在鉤子函式中賦值就可以了

 mounted() {
    console.log(this.value, this.info, this.subobj);
    if (this.subobj) {
      this.form = this.subobj;
      console.log("parentobj:", this.form);
      this.formatTreeDate(this.form);
    }
  },

父元件的監聽通知和操作tab：

// 顯示workOrderPage
    showWorkOrderPage(obj) {

      this.activeName = "gongdan";

      this.subobj = obj;
      
      // 動態載入了兄弟tab元件所以需要重新賦值給workOrderLog
    },

還有個額外注意的點：如果用到v-disabled,或者不重新載入，第一個頁面的級聯選擇字典項會調不通，原因是被第二個元件的同名級聯項覆蓋了。加上v-if就好了