vue中mixin怎么使用

這篇文章主要介紹“vue中mixin怎么使用”，在日常操作中，相信很多人在vue中mixin怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue中mixin怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1、什么是mixin

這不是Vue的專屬的，可以說(shuō)是一種思想，在很多開(kāi)發(fā)框架中都實(shí)現(xiàn)了Mixin。

官方解釋：

mixin提供了一種非常靈活的方式，來(lái)分發(fā)Vue組件中可復(fù)用的功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。

自己的理解：

將組件的公共邏輯或者配置提取出來(lái)，哪個(gè)組件需要用到時(shí)，直接將提取的這部分混入到組件內(nèi)部即可。這樣可以減少代碼冗余度，也可以讓后期維護(hù)起來(lái)更加容易。

2、mixin與Vuex的區(qū)別

vuex： 公共狀態(tài)管理，如果在一個(gè)組件中更改Vuex中的某個(gè)數(shù)據(jù)，name其他所有引入了Vuex中該數(shù)據(jù)的組件也會(huì)跟著變化；

Mixin： 中的數(shù)據(jù)和方法都是獨(dú)立的，組件之間使用后是相互不影響的。

3、mixin的使用

可以理解為一個(gè)對(duì)象。只不過(guò)這個(gè)對(duì)象里面可以包含Vue組件中的一些常見(jiàn)配置。如data，methods，created。

3.1、局部混入

<script>
//1、引入
import MyMixin from "../../mixin/index"
export default {
  //使用
  mixins: [MyMixin],
}
</script>

3.2、全局混入

在main.js中配置全局混入，請(qǐng)謹(jǐn)慎使用全局混入，因?yàn)樗鼤?huì)影響每個(gè)單獨(dú)創(chuàng)建的Vue實(shí)例。推薦將其作為插件發(fā)布，以避免重復(fù)應(yīng)用混入。

import Mixin from "./mixin";
Vue.mixin(Mixin)

4、mixin選項(xiàng)合并

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

當(dāng)發(fā)生了沖突，默認(rèn)使用或執(zhí)行組件內(nèi)部的數(shù)據(jù)或方法。

4.1、生命周期函數(shù)

確切來(lái)說(shuō)不算沖突，因?yàn)樯芷诤瘮?shù)的名稱都是固定的。默認(rèn)的合并策略如下：

先執(zhí)行mixin中生命周期函數(shù)中的代碼，然后執(zhí)行組件內(nèi)部的代碼。

4.2、data中的數(shù)據(jù)沖突

當(dāng)mixin中的data數(shù)據(jù)和組件中的data的數(shù)據(jù)沖突時(shí)，組件中的data數(shù)據(jù)會(huì)覆蓋mixin中數(shù)據(jù)。

4.3、方法沖突

命名方法的名字一樣就會(huì)沖突。

可以自定義合并規(guī)則解決沖突，但是感覺(jué)沒(méi)必要，這使項(xiàng)目更加復(fù)雜了

5、優(yōu)缺點(diǎn)

5.1、優(yōu)點(diǎn)

• 提高代碼復(fù)用性

• 無(wú)需傳遞狀態(tài)

• 維護(hù)方便，只需要修改一個(gè)地方

5.2、缺點(diǎn)

• 命名沖突

• 濫用的話后期很難維護(hù)

• 不好追溯源，排查問(wèn)題稍顯麻煩

• 不能輕易的重復(fù)代碼

6、利用mixin開(kāi)發(fā)一個(gè)UI庫(kù)

簡(jiǎn)單案例

創(chuàng)建Button.vue組件

<template>
  <div class="Button">
    <button :class="['my-btn', btnStyle]">
      <slot></slot>
    </button>
  </div>
</template>
<script>
export default {
  name: "Button",
  props: {
    btnStyle: {
      type: String,
      default: 'btn-primary'
    },
  },
}
</script>
<style scoped>
.my-btn {
  height: 34px;
  padding: 0 15px;
  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中引入并暴露：

import MyBtn from "./MyUI/Button";
export default {
    components:{
        MyBtn
    }
}

在組件內(nèi)混入使用的方法

<template>
  <div class="MixinStudy">
    <!--    通過(guò)Mixin寫(xiě)的一個(gè)UI組件button-->
    <MyBtn btnStyle="btn-danger">點(diǎn)擊</MyBtn>
  </div>
</template>
<script>
import MyMixin from "../../mixin/index"
export default {
  name: "MixinStudy",
  mixins: [MyMixin],
}
</script>

全局混入的使用方法

main.js文件中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Mixin from "./mixin";
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false;
Vue.mixin(Mixin)
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')
//組件中
<template>
  <div class="MixinStudy">
    <!--    通過(guò)Mixin寫(xiě)的一個(gè)UI組件button-->
    <MyBtn btnStyle="btn-danger">點(diǎn)擊</MyBtn>
  </div>
</template>
<script>
export default {
  name: "MixinStudy",
}
</script>

到此，關(guān)于“vue中mixin怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！