vue的混入(mixin)理解

首先，混入mixin是一个非常灵活的方式，主要用于提高组件内的可复用功能。

一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

简单些就是：凡是混入了某个文件的所有vue文件，都可以使用混入文件内的方法等。

而且二者直接不是父子内之间的关系，混入文件内的东西，都可以直接使用，也不需要传参等。

一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。

混入文件：

mixin.js

export const Mixin = {
  data () {
    return {
	  message: 'hello',
      foo: 'abc'
	}
  },
  created: function () {
    console.log('混入对象的钩子被调用')
  },
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

在其他文件使用混入：

import { mixin} from '@/mixins/mixin'


export default {
    name: "App",
    mixins:[mixin],
    data: function () {
        return {
          message: 'goodbye',
          bar: 'def'
        }
    },
    created: function () {
        console.log(this.$data)
        // => { message: "goodbye", foo: "abc", bar: "def" }
    }
}

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

混入后的数据及方法可以直接使用。