學習Vue之路——minxin

minxin其實是一個對象,里面的結構大致跟普通組件的script里面的一樣睡汹,有data屬性帖旨,鉤子函數和方法等
混入 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式扇商《疽蹋混入對象可以包含任意組件選項。當組件使用混入對象時溶浴,所有混入對象的選項將被混入該組件本身的選項乍迄。

在實際項目中,可以新建一個js文件士败,導出一個minxin對象 在引用的組件中引入使用即可
這里例子就簡單的跟官網一樣幫助理解即可

選項合并

當組件和混入對象含有同名選項時闯两,這些選項將以恰當的方式混合。

比如谅将,數據對象在內部會進行淺合并 (一層屬性深度)漾狼,在和組件的數據發(fā)生沖突時以組件數據優(yōu)先。

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" }
  }
})

同名鉤子函數將混合為一個數組饥臂,因此都將被調用逊躁。另外,混入對象的鉤子將在組件自身鉤子之前調用隅熙。

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

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

// => "混入對象的鉤子被調用"
// => "組件鉤子被調用"

值為對象的選項稽煤,例如 methods, components 和 directives核芽,將被混合為同一個對象。兩個對象鍵名沖突時酵熙,取組件對象的鍵值對轧简。

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"

注意:Vue.extend() 也使用同樣的策略進行合并。

也可以全局混入對象匾二,但是謹慎使用哮独!

OK啦!察藐!

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末皮璧,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子转培,更是在濱河造成了極大的恐慌恶导,老刑警劉巖浆竭,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浸须,死亡現場離奇詭異,居然都是意外死亡邦泄,警方通過查閱死者的電腦和手機删窒,發(fā)現死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來顺囊,“玉大人肌索,你說我怎么就攤上這事√靥迹” “怎么了诚亚?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長午乓。 經常有香客問我站宗,道長,這世上最難降的妖魔是什么益愈? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任梢灭,我火速辦了婚禮,結果婚禮上蒸其,老公的妹妹穿的比我還像新娘敏释。我一直安慰自己,他們只是感情好摸袁,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布钥顽。 她就那樣靜靜地躺著,像睡著了一般靠汁。 火紅的嫁衣襯著肌膚如雪蜂大。 梳的紋絲不亂的頭發(fā)上湿蛔,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天,我揣著相機與錄音县爬,去河邊找鬼阳啥。 笑死,一個胖子當著我的面吹牛财喳,可吹牛的內容都是我干的察迟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼耳高,長吁一口氣:“原來是場噩夢啊……” “哼扎瓶!你這毒婦竟也來了?” 一聲冷哼從身側響起泌枪,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤概荷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后碌燕,有當地人在樹林里發(fā)現了一具尸體误证,經...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年修壕,在試婚紗的時候發(fā)現自己被綠了愈捅。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡慈鸠,死狀恐怖蓝谨,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情青团,我是刑警寧澤譬巫,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站督笆,受9級特大地震影響芦昔,放射性物質發(fā)生泄漏。R本人自食惡果不足惜胖腾,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一烟零、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧咸作,春花似錦锨阿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春末早,著一層夾襖步出監(jiān)牢的瞬間烟馅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工然磷, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留郑趁,地道東北人。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓姿搜,卻偏偏與公主長得像寡润,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子舅柜,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

推薦閱讀更多精彩內容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容梭纹,還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,052評論 0 29
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,221評論 0 6
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本致份,Vue即被注冊為全局變量变抽,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,034評論 4 129
  • 前言 記錄平時學到的知識氮块,標題寫的大氣一點绍载,也算是給自己一點鼓勵,希望在技術這條路可以遠走越遠雇锡,路越走越寬~ 文中...
    徐國軍_plus閱讀 1,044評論 0 9
  • 為人處事锰提,就怕沒有立場,更怕站錯了立場
    吾乃哲貓閱讀 123評論 0 0