介紹:
官方定義:混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入對象可以包含任意元件選項。當元件使用混入對象時,所有混入對象的選項将被混入該元件本身的選項。
其本質就是一個
js
對象,可以包含我們元件想要複用的任意功能和生命周期,如:
data
、
created
、
methods
、
computed
等等。
使用
定義一個混入對象 :
把混入對象混入到目前的元件中:
用法就是這麼簡單。
mixin 的特點
1、方法和參數在各元件中不共享
混合對象中的資料 num :
元件1中的參數num進行+1的操作:
元件2中的參數num未進行操作:
看兩元件中分别輸出的num值:
大家可以看到,我在元件1裡改變了num裡面的值,元件2中的num值還是混入對象裡的初始值。
2、值為對象的選項,如methods,components等,選項會被合并,鍵沖突的元件會覆寫混入對象的。
混入對象中的方法:
元件中的方法:
列印台的輸出:
3、值為函數的選項,如created,mounted等,就會被合并調用,混合對象裡的鈎子函數在元件裡的鈎子函數之前調用。
混入對象 created 函數中的console:
元件 created 函數中的console:
列印台的結果:
與vuex的差別
經過上面的例子之後,他們之間的差別應該很明顯了哈~
- vuex:用來做狀态管理的,裡面定義的變量在每個元件中均可以使用和修改,在任一元件中修改此變量的值之後,其他元件中此變量的值也會随之修改。
- Mixins:可以定義共用的變量,在每個元件中使用,引入元件中之後,各個變量是互相獨立的,值的修改在元件中不會互相影響。
與公共元件的差別
同樣明顯的差別來再列一遍哈~
- 元件:在父元件中引入元件,相當于在父元件中給出一片獨立的空間供子元件使用,然後根據props來傳值,但本質上兩者是相對獨立的。
- Mixins:則是在引入元件之後與元件中的對象和方法進行合并,相當于擴充了父元件的對象與方法,可以了解為形成了一個新的元件。
異步請求
當 mixins 包含異步請求函數,而我們又需要在元件中使用異步請求函數的傳回值時,我們會取不到此傳回值,如下:
mixin中
元件 template1 中:
解決方案:不要傳回結果而是直接傳回異步函數
mixin 中:
元件 template1 中:
控制台結果: