此筆記僅以個人理解方式記錄
前言
我們在實作中，難免會遇到在不同組件中，卻有需求相同的資料格式，因此 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
