vue 混入 (mixin) 的理解和使用

在vue的官方文档是这样解释的：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。简单的理解就是它可以制作一个可以复用的功能，可以复用到各个组件中，同时呢这个mixin功能可以使用vue组件里任意组件选项，比如data，method，watch，和各个生命周期函数。当需要运用的组件，引用它时，相当于把mixin的各个组件选项合并到引用的组件中。

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

我们可以看到，钩子函数created所打印的数据也包含有对象mixin data里的数据。

项目中的运用

项目中我们可以创建一个mixins的文件夹，文件里有我们需要运用的mixin功能文件

image.png

在需要运用的组件里引用我们需要的mixins文件

<script>
import toggle from "@/components/mixins/toggle.js";
export default {
   mixins: [toggle],
}
</script>

这样我们就可以复用toggle.js里的toggleShow方法了。

使用场景

给项目添加可以复用的功能，有很多方法，那我们应该在什么使用运用vue mixin功能呢？我的理解是如果一个功能需要运用vue 组件里的组件选项，比如data，computed，以及各种钩子函数的时候，用mixin是首选。