一、什么是Mixins？

mixins（混入），官方的描述是一種分發 Vue 組件中可復用功能的非常靈活的方式，mixins是一個js對象，它可以包含我們組件中script項中的任意功能選項，如data、components、methods 、created、computed等等。我們只要將共用的功能以對象的方式傳入 mixins選項中，當組件使用 mixins對象時所有mixins對象的選項都將被混入該組件本身的選項中來，這樣就可以提高代碼的重用性，使你的代碼保持干凈和易于維護。

二、什么時候使用Mixins？

當我們存在多個組件中的數據或者功能很相近時，我們就可以利用mixins將公共部分提取出來，通過 mixins封裝的函數，組件調用他們是不會改變函數作用域外部的。

三、如何創建Mixins？

在src目錄下創建一個mixins文件夾，文件夾下新建一個myMixins.js文件。前面我們說了mixins是一個js對象，所以應該以對象的形式來定義myMixins，在對象中我們可以和vue組件一樣來定義我們的data、components、methods 、created、computed等屬性，并通過export導出該對象
myMixins.js：

// myMixins.js export default {data () {return {num:1}},mounted() {this.speak();},methods: {speak() {console.log(this.num);},} }

四、如何在組件中使用Mixins？

在需要調用的組件中引入myMixins.js文件，然后在export default 中引入你需要的對象即可

五、Mixins的特點

（1）方法和參數在各組件中不共享，雖然組件調用了mixins并將其屬性合并到自身組件中來了，但是其屬性只會被當前組件所識別并不會被共享，也就是其他組件無法從當前組件中獲取到mixins中的數據和方法。

① todo.vue：組件1中對num進行+1操作

// todo.vue // 引入 myMixins.js 文件 import {myMixins} from './myMixins';export default {mixins: [myMixins],data() {return {}},created() {this.num++},}

② list.vue 組件2不進行操作

// list.vue import {myMixins} from './myMixins';export default {mixins: [myMixins],data() {return {}}, }

③ 分別切換到兩個頁面，查看控制臺輸出

會發現組件1改變了num里面的值，組件2中num值還是混合對象的初始值，并沒有隨著組件1的增加而改變

（2）引入mixins后組件會對其進行合并，將mixins中的數據和方法拓展到當前組件中來，在合并的過程中會出現沖突，接下來我們詳細了解Mixins合并沖突

六、關于Mixins合并沖突

（1）值為對象(components、methods 、computed、data)的選項，混入組件時選項會被合并，鍵沖突時優先組件，組件中的鍵會覆蓋混入對象的

① 我們在混入對象增加num屬性、getDate1方法和getDate2方法

// myMixins.js export const myMixins = {components:{},data() {return {num: 1,}},methods: {getDate1() {console.log("num1 from mixins =", this.num )},getDate2() {console.log("num2 from mixins =", this.num )},} }

② 我們在引入了myMixins文件的 todo.vue 組件中，增加num屬性、getDate1方法和getDate3方法

// todo.vue import { myMixins } from "./myMixins.js"; export default {mixins: [myMixins],data() {return {num: 18,}},mounted() {this.getDate1();this.getDate2();this.getDate3();},methods: {getDate1() {console.log('num1 from template =', this.num)},getDate3() {console.log('num3 from template =', this.num)},} }

③ 我們會發現，組件中的age覆蓋了混合對象的age，todo.vue 組件的getDate1方法覆蓋了混合對象的getDate1方法

（2）值為函數(created、mounted)的選項，混入組件時選項會被合并調用，混合對象里的鉤子函數在組件里的鉤子函數之前調用

myMixins.js 中的console：

// myMixins.js export const myMixins = {components:{},data() {return {}},created() {console.log('hello from mixin')}

todo.vue 中的 console

// todo.vue import { myMixins } from "./myMixins.js";export default {mixins: [myMixins],data() {return {}},created() {console.log('hello from self')} }

控制臺打印

七、vue中mixins的使用方法和注意點 (異步請求的情況)

當混合里面包含異步請求函數，而我們又需要在組件中使用異步請求函數的返回值時，我們會取不到此返回值，如下：

Mymixins.js文件中

// myMixins.js export const myMixins = {components:{},data() {return {num: 1,}},methods: {getDate1() {new Promise((resolve,reject) => {let a = 1;setTimeout(() => {resolve(a)},500)}).then(res => {console.log(res,'res');return res})},} }

todo.vue 文件中

// todo.vue import { myMixins } from "./myMixins.js";export default {mixins: [myMixins],data() {return {}},mounted() {console.log(this.getDate1,'template1-func_one')} }

解決方案：不要返回結果而是直接返回異步函數

Mymixins.js文件中

// myMixins.js 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},} }

todo.vue 文件中

// todo.vue import { myMixins } from "./myMixins.js";export default {mixins: [myMixins],data() {return {}},mounted() {this.getDate1().then(res => {console.log(res,'template1-res')})} }

總結

以上是生活随笔為你收集整理的vue中mixins的使用方法和注意地方的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。