【译】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!

原文