Vue?mixins混入如何使用

這篇文章主要介紹了Vue mixins混入如何使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue mixins混入如何使用文章都會有所收獲，下面我們一起來看看吧。

一、什么是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導出該對象

四、如何使用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() {
    return {
      age: 18,
    }
  },
  methods: {
    getAge1() {
      console.log("age1 from mixins =", this.age )
    },
    getAge2() {
      console.log("age2 from mixins =", this.age )
    },
  }
}

②我們在引入了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 =', this.age)
    },
  }
}

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

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

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

import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log('xxx from template')
  }
}

七、與vuex的區別

vuex：用來做狀態管理的，里面定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改。

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

八、與公共組件的區別

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

Mixins：則是在引入組件之后與組件中的對象和方法進行合并，相當于擴展了父組件的對象與方法，可以理解為形成了一個新的組件。

關于“Vue mixins混入如何使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue mixins混入如何使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。