vue-mixins

使用場景 當兩個組件存在相同的方法，例如須要進行初始化，例如分頁操做，進入頁面時，須要對頁面初始化頁面。這個時候你能夠選擇傳統的寫組件來進行分離，可是使用mixins能夠不經過狀態傳遞，直接進行強大的混合，方便了許多。

mixins容許你封裝一塊在應用的其餘組件中均可以使用的函數。若是使用姿式得當，他們不會改變函數做用域外部的任何東西，所以哪怕執行屢次，只要是一樣的輸入你老是能獲得同樣的值，

對於有衝突的代碼，這裏能夠分爲兩個狀況，若是是vue生命週期裏的鉤子函數，那將會進行合併，以此執行mixins以及組件的函數；若是是methods等方法，（不是鉤子函數）那組件中的方法將會覆蓋mixins中的方法。

Mixins 可以靈活地實現爲 Vue 組件分發可複用功能。

在 Vue 中 mixins 有兩種類型：

1. 局部 Mixins： 這就是咱們在這篇文章中所處理的類型。它的範圍僅侷限於導入和註冊的組件。局部 mixin 的影響範圍由引入它的組件所決定。
2. 全局 Mixins： 這是一種不一樣的 mixin，不管在任何 Vue 項目中，它是定義在 Main.js 文件中的。它會影響一個應用中的全部組件，因此 Vue 的開發團隊建議要謹慎使用。一個全局 mixin 的定義看起來就像這樣：

Vue.mixin({
  mounted() {
    console.log("hello world!");
  }
});
複製代碼

使用

建立mixins文件夾

經過import引入並在mixins裏聲明一次

import DeviceCurtain from '../Mixins/deviceCurtain'

export default {
	mixins: [DeviceCurtain],
}
複製代碼