mixin現在怎么使用(vue中mixin怎么使用)

1、什么是mixin

這不是Vue的專屬的,可以說是一種思想,在很多開發框架中都實現了Mixin。

官方解釋:

mixin提供了一種非常靈活的方式,來分發Vue組件中可復用的功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被“混合”進入該組件本身的選項。

自己的理解:

將組件的公共邏輯或者配置提取出來,哪個組件需要用到時,直接將提取的這部分混入到組件內部即可。這樣可以減少代碼冗余度,也可以讓后期維護起來更加容易。

2、mixin與Vuex的區別

vuex: 公共狀態管理,如果在一個組件中更改Vuex中的某個數據,name其他所有引入了Vuex中該數據的組件也會跟著變化;

Mixin: 中的數據和方法都是獨立的,組件之間使用后是相互不影響的。

3、mixin的使用

可以理解為一個對象。只不過這個對象里面可以包含Vue組件中的一些常見配置。如data,methods,created。

3.1、局部混入

<script>//1、引入importMyMixinfrom"../../mixin/index"exportdefault{//使用mixins:[MyMixin],}</script>

3.2、全局混入

在main.js中配置全局混入,請謹慎使用全局混入,因為它會影響每個單獨創建的Vue實例。推薦將其作為插件發布,以避免重復應用混入。

importMixinfrom"./mixin";Vue.mixin(Mixin)

4、mixin選項合并

mixin中定義的屬性或方法名稱與組件中定義的名稱沖突了,該怎么辦?

當發生了沖突,默認使用或執行組件內部的數據或方法。

4.1、生命周期函數

確切來說不算沖突,因為生命周期函數的名稱都是固定的。默認的合并策略如下:

先執行mixin中生命周期函數中的代碼,然后執行組件內部的代碼。

4.2、data中的數據沖突

當mixin中的data數據和組件中的data的數據沖突時,組件中的data數據會覆蓋mixin中數據。

4.3、方法沖突

命名方法的名字一樣就會沖突。

可以自定義合并規則解決沖突,但是感覺沒必要,這使項目更加復雜了

5、優缺點

5.1、優點

• 提高代碼復用性

• 無需傳遞狀態

• 維護方便,只需要修改一個地方

5.2、缺點

• 命名沖突

• 濫用的話后期很難維護

• 不好追溯源,排查問題稍顯麻煩

• 不能輕易的重復代碼

6、利用mixin開發一個UI庫

簡單案例

創建Button.vue組件

<template><pclass="Button"><button:class="['my-btn',btnStyle]"><slot></slot></button></p></template><script>exportdefault{name:"Button",props:{btnStyle:{type:String,default:'btn-primary'},},}</script><stylescoped>.my-btn{height:34px;padding:015px;border:none;background-color:#874b4b;color:#fff;}.my-btn.btn-primary{background-color:blue;/*color:#fff;*/}.my-btn.btn-danger{background-color:red;/*color:#fff;*/}</style>

在index.js中引入并暴露:

importMyBtnfrom"./MyUI/Button";exportdefault{components:{MyBtn}}

在組件內混入使用的方法

<template><pclass="MixinStudy"><!--通過Mixin寫的一個UI組件button--><MyBtnbtnStyle="btn-danger">點擊</MyBtn></p></template><script>importMyMixinfrom"../../mixin/index"exportdefault{name:"MixinStudy",mixins:[MyMixin],}</script>

全局混入的使用方法

main.js文件中importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importMixinfrom"./mixin";Vue.prototype.$echarts=echartsVue.config.productionTip=false;Vue.mixin(Mixin)newVue({router,render:h=>h(App)}).$mount('#app')//組件中<template><pclass="MixinStudy"><!--通過Mixin寫的一個UI組件button--><MyBtnbtnStyle="btn-danger">點擊</MyBtn></p></template><script>exportdefault{name:"MixinStudy",}</script>

到此,關于“vue中mixin怎么使用”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注本站網站,小編會繼續努力為大家帶來更多實用的文章!