一、概述

先來看一下頁面

現有一個首頁inde.vue，是載入有3個tab，分別是工單處理A.vue，工單報價B.vue，工單回單C.vue。

這3個tab是不同的vue檔案，需要共享一個工單詳情orderDetails資料。這個資料從後端api請求介面獲取。

簡單的做法是，A，B，C這3個頁面都去呼叫介面。那麼這樣的話，載入首頁時，介面會被呼叫3次，浪費資源。

有沒有可能只調用一次介面，就可以讓3個頁面獲取呢？答案是可以的。

二、測試

新建好vue ElementUI專案之後，在views目錄下建立資料夾Tab，目錄結構如下：

Tab/
├── details
│ ├── A.vue
│ ├── B.vue
│ └── C.vue
└── index.vue
 

index.vue

<template>
  <div>
    <el-tabs v-model="activeName" type="card" closable @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tabs"
        :key="index"
        :label="item"
        :name="item"
      >
        <A ref="A" @children="updateOrder"
 
 v-show="tabIndex==0" :orderDetails="orderDetails"></A>
        <B ref="B" @children="updateOrder" v-show="tabIndex==1" :orderDetails="orderDetails"></B>
        <C ref="C" @children="updateOrder" v-show="tabIndex==2" :orderDetails="orderDetails"></C>
      </el-tab-pane
 
>
    </el-tabs>
    <div style="height: 10px"></div>
    <button @click="testUpate">更改資料</button>
  </div>
</template>
<script>
  import A from './details/A'
  import B from './details/B'
  import C from './details/C'
  export default {
    name: "index",
    components: {
      A,
      B,
      C,
    },
    data() {
      return {
        tabIndex:0,  // 當前點選的index
        orderDetails:{}, // 工單詳情
        // tab展示選單
        tabs: ['工單處理', '工單報價', '工單回單'],
        activeName:"工單處理"
      };
    },
    mounted() {
      this.getOrderDetails()
    },
    methods: {
      handleClick(tab, event) {
        // console.log("handleClick",this.editableTabsValue)
        // console.log(tab, event);
        this.tabIndex = tab.index
      },
      updateOrder(){
        this.getOrderDetails()
      },
      // 獲取工單詳情
      getOrderDetails(){
        this.orderDetails={
          id: 1,
          process: '建立工單',
          status: 1,
          desc: '已建立工單【202109162058】',
          operate: '小張',
          createTime: '2021/09/16 20:58:52'
        }
      },
      // 測試更改資料
      testUpate(){
        this.orderDetails={
          id: 2,
          process: '分派工單',
          status: 2,
          desc: '已分派工單給小王【12345678910】',
          operate: '小張',
          createTime: '2021/09/16 21:58:52'
        }
      }
    }
  };
</script>

A.vue

<template>
  <div>
    <div>元件A，詳情：</div>
    <div>{{orderDetails}}</div>
  </div>
</template>

<script>
  export default {
    name: "A",
    props:{
      orderDetails:{
        type:Object,
        default:{}
      }
    },
  }
</script>

<style scoped>

</style>

B.vue

<template>
  <div>
    <div>元件B，詳情：</div>
    <div>{{orderDetails}}</div>
  </div>
</template>

<script>
  export default {
    name: "B",
    props:{
      orderDetails:{
        type:Object,
        default:{}
      }
    },
  }
</script>

<style scoped>

</style>

C.vue

<template>
  <div>
    <div>元件C，詳情：</div>
    <div>{{orderDetails}}</div>
  </div>
</template>

<script>
  export default {
    name: "C",
    props:{
      orderDetails:{
        type:Object,
        default:{}
      }
    },
  }
</script>

<style scoped>

</style>

程式碼解釋：

先來看index.vue

<A ref="A" @children="updateOrder" v-show="tabIndex==0" :orderDetails="orderDetails"></A>

由於父元件index需要呼叫子元件A，因此使用children呼叫updateOrder方法。這個方法用來請求後端api介面。注意：只需要在父元件中呼叫介面即可，子元件不需要呼叫介面。

再來看:orderDetails="orderDetails"，表示繫結屬性orderDetails

A.vue

這裡需要定義傳值的型別，使用prop關鍵字，這裡的定義的orderDetails是一個物件。

總結：

由於在index，分別為元件A，B，C綁定了orderDetails。因此在index中變更orderDetails的值，那麼其他頁面，也會隨之變動。