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

成都創(chuàng)新互聯(lián)公司主要從事做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)紅崗,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”。

比如，數(shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行遞歸合并，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先。

var Mymixin = {
  data: function(){
   return {
    message: 'hello',
    foo: 'abc'
   }
  }
}
 export default {
  mixins:[Mymixin],
  data(){
   return{
    message:'good',
    bar:'kiss'
   }
   
  },
  created(){
   console.log(this.$data) //bar: "kiss",foo: "abc",message: "good"
  },

同名鉤子函數(shù)將合并為一個(gè)數(shù)組，因此都將被調(diào)用。另外，混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用。

值為對(duì)象的選項(xiàng)，

例如 methods、components 和 directives，將被合并為同一個(gè)對(duì)象。兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)。

全局混入

混入也可以進(jìn)行全局注冊(cè)。使用時(shí)格外小心！一旦使用全局混入，它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí)，這可以用來為自定義選項(xiàng)注入處理邏輯。

// 為自定義的選項(xiàng) 'myOption' 注入一個(gè)處理器?？稍趍ain.js中寫入
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})
在任意組件里面都可以使用
new Vue({
 myOption: 'hello!'
})
// => "hello!"
export default {
  myOption: 'hello!',
 }

請(qǐng)謹(jǐn)慎使用全局混入，因?yàn)樗鼤?huì)影響每個(gè)單獨(dú)創(chuàng)建的 Vue 實(shí)例 (包括第三方組件)。大多數(shù)情況下，只應(yīng)當(dāng)應(yīng)用于自定義選項(xiàng)，就像上面示例一樣。推薦將其作為插件發(fā)布，以避免重復(fù)應(yīng)用混入。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。