目錄

• 前言
  
• 一、什麼是Mixins？
  
• 二、什麼時候使用Mixins？
  
• 三、如何建立Mixins？
  
• 四、如何使用Mixins？
  
• 五、Mixins的特點
  
• 六、Mixins合併衝突
  
• 七、與x的區別
  
• 八、與公共元件的區別
  

前言

當我們的專案越來越大，我們會發現元件之間可能存在很多相似的功能，你在一遍又一遍的複製貼上相同的程式碼段（data，method，watch、mounted等），如果我們在每個元件中去重複定義這些屬性和方法會使得專案出現程式碼冗餘並提高了維護難度，針對這種情況官方提供了Mixins特性

一、什麼是Mixins？

mixins（混入），官方的描述是一種分發 Vue 元件中可複用功能的非常靈活的方式，mixins是一個物件，它可以包含我們元件中script項中的任意功能

二、什麼時候使用Mixins？

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

三、如何建立Mixins？

在src目錄下建立一個mixins資料夾，資料夾下新建一個myMixins.js檔案。前面我們說了mixins是一個js物件，所以應該以物件的形式來定義myMixins，在物件中我們可以和vue元件一樣來定義我們的data、components、methods 、created、computed等屬性，並通過export匯出該物件

四、如何使用Mixins？

在需要呼叫的元件中引入myMixins.js檔案，然後在export default 中引入你需要的物件即可

五、Mixins的特點

【5.1】方法和引數在各元件中不共享，雖然元件呼叫了mixins並將其屬性合併到自身元件中來了，但是其屬性只會被當前元件所識別並不會被共享，也就是其他元件無法從當前元件中獲取到mixins中的資料和方法。

①首先我們在混合物件myMixins.js中定義一個age欄位和getAge方法

export const myMixins = {
components:{},data() {
return {
age: 18,}
},mounted() {
this.getAge()
},methods: {
getAge() {
console.log(this.age)
}
}
}

② 元件1中對num進行+1操作

import { myMixins } from "@/mixins/myMixins.js";
export default {
mixins: [myMixins],data() {
return {}
},created() {
this.age++
},}

③元件2不進行操作

export default {
mixins: [myMixins],data() {
return {}
},}

④我們分別切換到兩個頁面，檢視控制檯輸出。會發現元件1改變了age裡面的值，元件2中age值還是混合物件的初始值，並沒有隨著元件1的增加而改變

【5.2】引入mixins後元件會對其進行合併，將mixins中的資料和方法拓展到當前元件中來，在合併的過程中會出現衝突，接下來我們詳細瞭解Mixins合併衝突

六、Mixins合併衝突

【6.1】值為物件(components、methods 、computed、data)的選項，混入元件時選項會被合併，鍵衝突時優先元件，元件中的鍵會覆蓋混入物件的

①我們在混入物件增加age屬性、getAge1方法和getAge2方法

// myMixins.js
export const myMixins = {
components:{},data(http://www.cppcns.com) {
return {
age: 18,methods: {
getAge1() {
console.log("age1 from mixins =",this.age )
},getAge2() {
console.log("age2 from mixins =",}
}

②我們在引入了myMixins檔案的元件中，增加age屬性、getAge1方法和getAge3方法

// template.vue
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 =',}
}

③我們會發現，元件中的age覆蓋了混合物件的age，元件的getAge1方法覆蓋了混合物件的getAge1方法

【6.2】值為函式(created、mounted)的選項，混入元件時選項會被合併呼叫，混合物件裡的鉤子函式在元件裡的鉤子函式之前呼叫

七、與vuex的區別

vuhttp://www.cppcns.comex：用來做狀態管理的，裡面定義的變數在每個元件中均可以使用和修改，在任一元件中修改此變數的值之後，其他元件中此變數的值也會隨之修改。

Mixins：可以定義共用的變數，在每個元件中使用，引入元件中之後，各個變數是相互獨立的，值的修改在元件中不會相互影響。

八、與公共元件的區別

元件：在父元件中引入元件，相當於在父元件中給出一片獨立的空間供子元件使用，然後根據props來傳值，但本質上兩者是相對獨立的。

Mixins：則是在引入元件之後與元件中的物件和方法進行合併，相當於擴充套件了父元件的物件與方法，可以理解為形成了一個新的元件。

到此這篇關於Vue 詳解mixins混入用法大全的文章就介紹到這了,更多相關Vue mixins混入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！