vue中mixin混入的使用

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

基礎(chǔ)

// 定義一個(gè)混入對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定義一個(gè)使用混入對象的組件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

選項(xiàng)合并

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

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

var mixin = {
  created: function () {
    console.log('混入對象的鉤子被調(diào)用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('組件鉤子被調(diào)用')
  }
})

// => "混入對象的鉤子被調(diào)用"
// => "組件鉤子被調(diào)用"

值為對象的選項(xiàng),例如 methods滥酥、components 和 directives更舞,將被合并為同一個(gè)對象。兩個(gè)對象鍵名沖突時(shí)坎吻,取組件對象的鍵值對缆蝉。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

全局混入

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

// 為自定義的選項(xiàng) 'myOption' 注入一個(gè)處理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

自定義選項(xiàng)合并策略

自定義選項(xiàng)將使用默認(rèn)策略您机,即簡單地覆蓋已有值穿肄。如果想讓自定義選項(xiàng)以自定義邏輯合并年局,可以向 Vue.config.optionMergeStrategies 添加一個(gè)函數(shù):

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}

對于多數(shù)值為對象的選項(xiàng),可以使用與 methods 相同的合并策略:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

可以在 Vuex 1.x 的混入策略里找到一個(gè)更高級的例子:

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末咸产,一起剝皮案震驚了整個(gè)濱河市矢否,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌脑溢,老刑警劉巖僵朗,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異焚志,居然都是意外死亡衣迷,警方通過查閱死者的電腦和手機(jī)畏鼓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門酱酬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人云矫,你說我怎么就攤上這事膳沽。” “怎么了让禀?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵挑社,是天一觀的道長。 經(jīng)常有香客問我巡揍,道長痛阻,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任腮敌,我火速辦了婚禮阱当,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘糜工。我一直安慰自己弊添,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布捌木。 她就那樣靜靜地躺著油坝,像睡著了一般。 火紅的嫁衣襯著肌膚如雪刨裆。 梳的紋絲不亂的頭發(fā)上澈圈,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天,我揣著相機(jī)與錄音帆啃,去河邊找鬼极舔。 笑死,一個(gè)胖子當(dāng)著我的面吹牛链瓦,可吹牛的內(nèi)容都是我干的拆魏。 我是一名探鬼主播盯桦,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼渤刃!你這毒婦竟也來了拥峦?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤卖子,失蹤者是張志新(化名)和其女友劉穎略号,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體洋闽,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡玄柠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了诫舅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片羽利。...
    茶點(diǎn)故事閱讀 40,852評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖刊懈,靈堂內(nèi)的尸體忽然破棺而出这弧,到底是詐尸還是另有隱情,我是刑警寧澤虚汛,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布匾浪,位于F島的核電站,受9級特大地震影響卷哩,放射性物質(zhì)發(fā)生泄漏蛋辈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一将谊、第九天 我趴在偏房一處隱蔽的房頂上張望冷溶。 院中可真熱鬧,春花似錦瓢娜、人聲如沸挂洛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽虏劲。三九已至,卻和暖如春褒颈,著一層夾襖步出監(jiān)牢的瞬間柒巫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工谷丸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留堡掏,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓刨疼,卻偏偏與公主長得像泉唁,于是被迫代替她去往敵國和親鹅龄。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容