Vue中mixins混入的介紹和使用詳解
當項目越來越大，項目中組件之間可能會存在一些相似的功能，這就導(dǎo)致了在各個組件中需要編寫功能相同的代碼段，重復(fù)地定義這些相同的屬性和方法，導(dǎo)致代碼地冗余，還不利于后期代碼的維護。
一、什么是Mixins
mixins（混入）：一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins 是一個 js 對象，它可以包含我們組件script中的任意功能選項，如：data、components、methods、created、computed 等等。我們只要將公用的功能以對象的方式傳入 mixins 選項中，當組件使用 mixins 對象，所有 mixins 對象的選項都將被擴展到該組件本身的選項中來，這樣就可以提高代碼的重用性，并易于后期的代碼維護。
二、何時使用Mixins
當存在多個組件中的數(shù)據(jù)或者功能很相近時，我們就可以利用 mixins 將公共部分提取出來，通過 mixins 封裝函數(shù)。
三、如何創(chuàng)建Mixins
src 目錄下創(chuàng)建一個 mixins 文件夾，在文件夾下新建一個 myMixins.js 文件。因為 mixins 是一個 js 對象，所以應(yīng)該以對象的形式來定義 myMixins。在對象中可以和 vue 組件一樣來定義 data、components、methods、created、computed 等屬性，并通過 export 導(dǎo)出該對象。
四、如何使用Mixins
在需要調(diào)用的組件中引入 myMixins.js 文件，然后在 export default 中引入需要的對象即可。
五、Mixins的主要特性
1.方法和參數(shù)在不同的組件中不共享
當某一個組件調(diào)用了 mixins 并將其屬性合并到自己組件中，其屬性只會被當前這個組件所識別，也就是說其他組件無法從當前組件中獲取到 mixins 中的數(shù)據(jù)和方法，做到了很好的數(shù)據(jù)隔離效果。如下所示：
// 在 myMixins.js 中定義一個 age 字段和 getAge 方法,用來獲取年齡信息
export const myMixins = {
data() {
return {
age: 18,
}
},
mounted() {
this.getAge()
},
methods: {
getAge() {
console.log(this.age)
}
}
}// 在第一個組件中引入 mixins，并且對 age 加1
import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
created() {
this.age++
},
}
// 發(fā)現(xiàn)控制臺輸出 19，說明當前組件的 age 變化了 // 在第二個組件中引入 mixins，但是不做任何處理
import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
}
// 發(fā)現(xiàn)控制臺輸出 18，說明當前組件的 age 無影響2.Mixins 合并沖突
當 mixins 的值為對象(components、methods 、computed、data)，混入到某個組件中時，選項會被合并。當對象名稱沖突時優(yōu)先組件，組件中的值會覆蓋混入對象的。
// 混入myMixins.js對象中增加age屬性、getAge1方法、getAge2方法
export const myMixins = {
components:{},
data() {
return {
age: 18,
}
},
methods: {
getAge1() {
console.log("age1 from mixins", this.age )
},
getAge2() {
console.log("age2 from mixins", this.age )
},
}
}// 組件中自帶age屬性、getAge1方法、getAge3方法；同時引入 mixins。
import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
data() {
return {
age: 20,
}
},
mounted() {
this.getAge1();
this.getAge2();
this.getAge3();
},
methods: {
getAge1() {
console.log('age1 from template', this.age)
},
getAge3() {
console.log('age3 from template', this.age)
},
}
}
// 輸出控制臺發(fā)現(xiàn)，組件中的age覆蓋了混合對象的age，組件的getAge1方法覆蓋了混合對象的getAge1方法
// age1 from template 20
// age2 from mixins 20
// age3 from template 20當值為函數(shù)(created、mounted)的選項，混入到組件中時，選項會被合并調(diào)用，混合對象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調(diào)用。
// myMixins.js
export const myMixins = {
components:{},
data() {
return {}
},
created() {
console.log('data from mixins')
}
}
// 組件中引入 mixins
import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
created() {
console.log('data from template')
}
}
// 先輸出混入對象的值，再輸入組件的值
// data from mixins
// data from template六、mixins 中有異步請求的情況
當混入里面包含異步請求函數(shù)，而我們又需要在組件中使用異步請求函數(shù)的返回值時，我們會取不到此返回值，解決方案是：不要返回結(jié)果，而是直接返回異步函數(shù)
// myMixins.js 中直接返回異步函數(shù)
export const myMixins = {
components:{},
data() {
return {
num: 1,
}
},
methods: {
async getDate1() {
let result = await new Promise((resolve,reject) => {
let a = 1;
setTimeout(() => {
resolve(1)
},500)
})
return result
},
}
}
// 組件中獲取混入的異步函數(shù)，通過then 方法獲取函數(shù)值。
import { myMixins } from "./myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
mounted() {
this.getDate1().then(res => {
console.log(res)
})
}
}七、與 vuex 的區(qū)別
vuex： 用來做狀態(tài)管理，vuex中定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改。相當于所有組件共享。
Mixins： 可以定義共用的變量，在每個組件中使用，引用組件中之后，各個變量是相互獨立的，值的修改在組件中不會相互影響。組件直接使用是相互隔離的，數(shù)據(jù)互不影響。
八、與公共組件的區(qū)別
組件： 在父組件中引入組件，相當于在父組件中給出一片獨立的空間供子組件使用，然后根據(jù) prop 來傳值，但本質(zhì)上兩者是相對獨立的。
Mixins： 在引入組件之后與組件中的對象和方法進行合并，相當于擴展了父組件的對象與方法，可以理解為形成了一個新的組件。
到此這篇關(guān)于Vue中mixins混入的介紹和使用詳解的文章就介紹到這了,更多相關(guān)Vue mixins混入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue?element-ui的table列表中展示多張圖片(可放大)效果實例
這篇文章主要給大家介紹了關(guān)于vue?element-ui的table列表中展示多張圖片(可放大)效果的相關(guān)資料,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了如何使用WebStorm進行斷點調(diào)試,包括配置、啟動本地應(yīng)用程序、設(shè)置斷點以及使用調(diào)試工具等步驟,文中通過圖文及代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
這篇文章主要為大家詳細介紹了Vue表單驗證插件Vue Validator使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了Vue文件下載進度條的實現(xiàn)原理,通過使用onDownloadProgress方法API獲取進度及文件大小等數(shù)據(jù)，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
本篇文章主要介紹了vue中將網(wǎng)頁打印成pdf實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue3使用el-table實現(xiàn)新舊數(shù)據(jù)對比的代碼詳解
這篇文章主要為大家詳細介紹了在vue3中使用el-table實現(xiàn)新舊數(shù)據(jù)對比,文中的示例代碼講解詳細,具有一定的參考價值,需要的小伙伴可以參考一下2023-12-12
這篇文章主要介紹了如何解決vue項目打包后文件過大問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-router懶加載速度緩慢問題及解決方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue+ElementUI?實現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實現(xiàn)分頁查詢-mysql數(shù)據(jù)，當數(shù)據(jù)庫中數(shù)據(jù)比較多時,就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句，實現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實現(xiàn)過程,希望對大家學(xué)習(xí)有所幫助2021-12-12
vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉(zhuǎn)跳操作
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉(zhuǎn)跳操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09