【译】Vue — 使用Mixins

7,399 阅读2分钟

当你的项目越来越大,你可能会发现在相似的组件里一遍又一遍的在复制粘贴相同的代码段(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!

原文