同一個(gè)mixin 不同組件調(diào)用 數(shù)據(jù) “不是共通的”截碴，別掉到坑里了（都說了是組件了）
mixin只是用于復(fù)用的，要想做數(shù)據(jù)共享 可以做一個(gè)$bus
mixin ceshi=2
onShow this.ceshi = "(123)"; mixin 打印 123
onHide this.ceshi = "(456)"; mixin 打印 2
前言
在項(xiàng)目開發(fā)的時(shí)候蛉威，我們會(huì)發(fā)現(xiàn)組件之間存在著很多相似的功能日丹，它們都擁有部分同樣的功能函數(shù)， 這時(shí)候我們?nèi)绻诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度蚯嫌，針對(duì)這種情況官方提供了Mixins特性哲虾。
-
什么是Mixins
mixins（混入）割坠，官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins是一個(gè)js對(duì)象妒牙，它可以包含我們組件中script項(xiàng)中的任意功能選項(xiàng)彼哼，如data、components湘今、methods 敢朱、created、computed等等摩瞎。我們只要將共用的功能以對(duì)象的方式傳入 mixins選項(xiàng)中拴签，當(dāng)組件使用 mixins對(duì)象時(shí)所有mixins對(duì)象的選項(xiàng)都將被混入該組件本身的選項(xiàng)中來，這樣就可以提高代碼的重用性旗们，使你的代碼保持干凈和易于維護(hù)蚓哩。
Vue實(shí)戰(zhàn)046：詳解Mixins混入使用和注意事項(xiàng) -
2
什么時(shí)候用Mixins
當(dāng)我們存在多個(gè)組件中的數(shù)據(jù)或者功能很相近時(shí)，我們就可以利用mixins將公共部分提取出來上渴，通過 mixins封裝的函數(shù)岸梨，組件調(diào)用他們是不會(huì)改變函數(shù)作用域外部的。
-
3
如何創(chuàng)建Mixins
在Vue中創(chuàng)建 mixins方法很簡(jiǎn)單稠氮，即然我們希望通過Mixins來提高代碼的復(fù)用性曹阔，那么當(dāng)然是選擇將Mixins進(jìn)行單獨(dú)管理了，在src目錄下創(chuàng)建一個(gè)mixins目錄隔披，在這里新建一個(gè)mixins.js文件赃份，在這里存放我們準(zhǔn)備服用的任意屬性，如data奢米、components抓韩、methods 、created鬓长、computed等谒拴。
Vue實(shí)戰(zhàn)046：詳解Mixins混入使用和注意事項(xiàng) -
4
如何定義Mixins
前面說了mixins是一個(gè)js對(duì)象款票，所以我們這里當(dāng)然是以對(duì)象的形式來定義Mixins了瑟押，在對(duì)象中我們可以和組件中一樣來定義我們的data、components坯汤、methods 怠蹂、created善延、computed等屬性，并通過export導(dǎo)出該對(duì)象城侧。
Vue實(shí)戰(zhàn)046：詳解Mixins混入使用和注意事項(xiàng) -
5
如何使用Mixins
在需要調(diào)用的組件中引入mixins.js文件易遣，再在export default中引入你需要的對(duì)象即可。
Vue實(shí)戰(zhàn)046：詳解Mixins混入使用和注意事項(xiàng) -
6
Mixins的特點(diǎn)
1嫌佑， 方法和參數(shù)在組件中不共享豆茫，雖然組件調(diào)用了mixins并將其屬性合并到自身組件中來了侨歉，但是其屬性只會(huì)被當(dāng)前組件所識(shí)別并不會(huì)被共享，也就是其他組件無法從當(dāng)前組件中獲取到mixins中的數(shù)據(jù)和方法揩魂。2幽邓，引入mixins后組件會(huì)對(duì)其進(jìn)行合并，將mixins中的數(shù)據(jù)和方法拓展到當(dāng)前組件中來火脉，當(dāng)mixins與組件中存在相同的屬性時(shí)牵舵，合并就會(huì)出現(xiàn)沖突。
如果值為對(duì)象時(shí)優(yōu)先組件倦挂，如果值為方法時(shí)優(yōu)先調(diào)用mixins中的方法畸颅。(方法也是 組件優(yōu)先吧)Vue實(shí)戰(zhàn)046：詳解Mixins混入使用和注意事項(xiàng) -
7
Mixins合并沖突
下面解析下組件與Mixins合并時(shí)遇到?jīng)_突問題，在Vue主要有data方援、components没炒、methods 、computed犯戏、created送火、mounted等功能選項(xiàng)，
其中created笛丙、mounted是鉤子函數(shù)漾脂，components、methods 胚鸯、computed、data為值對(duì)象笨鸡。當(dāng)遇到值對(duì)象屬性沖突（對(duì)象鍵名相同）時(shí)姜钳，組件選項(xiàng)優(yōu)先 。當(dāng)遇到函數(shù)方法選項(xiàng)時(shí)形耗，mixins和組件中的都會(huì)被執(zhí)行哥桥，且mixins中的會(huì)被先執(zhí)行(對(duì)應(yīng)上面說的 對(duì)象)，下面是例子：Vue實(shí)戰(zhàn)046：詳解Mixins混入使用和注意事項(xiàng) -
8
Mixins實(shí)例
我在mixins.js和和login.vue分別定義了data屬性test激涤，在created中先打印了一下test值拟糕，然后分別用computed屬性計(jì)算了一個(gè)型的num，并通過mounted調(diào)用了methods中打印num的方法倦踢。這里主要是test和num做了些區(qū)別送滞，下面我們來看下打印結(jié)果。
Vue實(shí)戰(zhàn)046：詳解Mixins混入使用和注意事項(xiàng) -
9
我們可以看到共打印了4次辱挥，2次來自created犁嗅，兩次來自mounted。初始值test為組件中的test晤碘，計(jì)算屬性中的num也取了vue中的計(jì)算方法褂微，mounted調(diào)用methods的方法也取了Vue中的print方法功蜓。從這里我們可以看出，methods 宠蚂、computed式撼、data中的屬性值都被Vue組件中的屬性覆蓋了，created和mounted則先后都被打印出來了求厕。
轉(zhuǎn)自：https://jingyan.baidu.com/article/0f5fb099b10c962d8234ea04.html
