【譯】Vue — 使用Mixins

當你的項目愈來愈大，你可能會發如今類似的組件裏一遍又一遍的在複製粘貼相同的代碼段（data，method，watcher等）。固然，你也能夠把這些獨立文件（指類似的組件）寫成一個組件，而後用props來定製它，可是使用太多的props很容易致使混亂。爲了不這個問題，大多數人僅僅仍是繼續選擇添加劇復的代碼，儘管感受有更好的解決方案。

慶幸的是，VueJS賜予了咱們Mixins —— 一種能在不一樣組件裏重用相同代碼的方式。Mixin對象可以使用組件的任何屬性（data，mounted，created，update等），並且當組件使用mixin時，這個mixin的全部信息也會混合到這個組件裏，這個組件就可以訪問到全部mixin的屬性就像申明在本身對象中同樣。咱們舉個例子：

// mixin.js file
export default {
   data () {
      msg: 'Hello World'
   },
   created: function () {
      console.log('Printing from the Mixin')
   },
   methods: {
      displayMessage: function () {
         console.log('Now printing from a mixin function')
      }
   }
}
// -----------------------------------------------------------
// main.js file
import mixin from './mixin.js'
new Vue({
   mixins: [mixin],
   created: function () {
      console.log(this.$data)
      this.displayMessage()
   }
})
// => "Printing from the Mixin"
// => {msg: 'Hello World'}
// => "Now printing from a mixin function"
複製代碼

你能看到，當使用mixin後，這個組件包含了mixin的全部data，並可以用this來訪問。你也能夠不用文件而用一個變量來定義mixin。坦白說，這幾乎就是mixin的全部內容了，但我以爲有必要了解一些極端的狀況，這會更加有用。

命名衝突的時候會怎樣？

當mixin中的屬性和組件中的屬性有相同名字的時候，就會產生命名衝突。發生這種狀況（生命週期函數除外）的時候，組件裏的屬性會優先使用。舉例，若是有個title變量在組件和mixin中都有 —— this.title返回的是組件中的title。代碼以下：

// mixin.js file
export default {
   data () {
      title: 'Mixin'
   }
}
// -----------------------------------------------------------

// main.js file
import mixin from './mixin.js'
export default {
   mixins: [mixin],
   data () {
      title: 'Component'
   },
   created: function () {
      console.log(this.title)
   }
}
// => "Component"
複製代碼

好了，差很少了。。。

固然Vue的Mixin還有更多東西能學，不過這裏這些足夠讓你入門Mixin並覆蓋了大多數的使用狀況。若是你想學習更多關於（Mixin）高級內容，好比全局mixins以及（mixins和組件的）合併策略，能夠查看Mixins文檔。我喜歡Vue文檔，我認爲寫的很好，很便於理解。

歡迎使用Mixing!

原文