2023 Vue直播班筆記 - Mixins 混合元件方法

此筆記僅以個人理解方式記錄

前言

我們在實作中，難免會遇到在不同組件中，卻有需求相同的資料格式，因此 mixins 可以達到我們的需求，除了 data 以外也包含了 methods 可以共用，舉例來說，學生資料可能會在，班級跟社團內被使用，當我們要撰寫元件時，就可以省略多餘的 data 定義。

敘述

先準備示範程式碼，我們在路徑 /pageA 示範

<template>
  <h1 class="mb-5">pageA 首頁</h1>
  <p class="py-3 mb-5 border border-1">顯示mixinx name => {{ name }}</p>
</template>

<script>
export default {

}
</script>

畫面呈現為 name 找不到出現異常，目前很正常因為沒定義。

接下來加入 mixins ，我們也先準備程式碼，該元件這裡命名為 MixinsPage.vue

<template>
  <p>MixinsPage</p>
</template>
<script>
export default{
  data(){
    return{
      name:'我是 MixinsPage 的 data'
    }
  }
}
</script>

回到 PageA 加入 mixins ，如下

<template>
  <h1 class="mb-5">pageA 首頁</h1>
  <p class="py-3 mb-5 border border-1">顯示mixinx name => {{ name }}</p>
</template>
<script>
import MixinxPage from "../components/mixinx/MixinxPage.vue";
export default {
  mixins: [MixinxPage],
}
</script>

加入後原本畫面 name 找不到的異常也沒了，也確定 MixinsPage 的 name 有被PageA使用。

注意!!!
1.如果原本元件內有同名的資料名稱或是函式名稱，會以該元件本身為優先
2.可以同時共用多個，例如 mixins: [MixinxPage,CartPage]，但是後方共用的會覆蓋前方共用的，最後如果主元件有，還是以主元件優先權為第一

最後補充

被共用的元件，其還是有生命週期

-PageA.vue

<template>
  <h1 class="mb-5">pageA 首頁</h1>
  <p class="py-3 mb-5 border border-1">顯示mixinx name => {{ name }}</p>
</template>
<script>
import MixinxPage from "../components/mixinx/MixinxPage.vue";
export default {
  mixins: [MixinxPage],
  data() {
    return {
      name: '我是 PageA 的 data'
    }
  },
  methods:{
    mixinxConsole(){
      console.log('我是PageA Fn');
    }
  },
  created() {
    console.log('PageA Created');
  },
  mounted() {
    console.log('PageA mounted');
  }
}
</script>

-MixinsPage.vue

<template>
  <p>MixinsPage</p>
</template>
<script>
export default{
  data(){
    return{
      name:'我是 MixinsPage 的 data'
    }
  },
  methods:{
    MixinsConsole(){
      console.log('我是Mixins Fn');
    }
  },
  created(){
    console.log('MixinsPage Created');
  },
  mounted(){
    console.log('MixinsPage mounted');
  }
}
</script>

結果如下圖，MixinsPage 的 name 被 PageA 引用了，而兩者的生命週期也有保持著規律運行。

• joker
• 2024/03/05