vue mixins的简单使用

我们都知道，类的代码复用可以通过 extends 进行类的继承。而对象的代码，可以通过什么方式复用呢？

Vue 提供了 mixins （混入），可以让我们复用组件的代码。

将相同代码抽取出来

在两个组件中有相同的代码时，可以将这些代码抽取出来，单独放到一个js文件中。

以下是在 mixin.js 文件中，将两个（或多个）组件中相同的 data 和 mounted 代码抽取出来，存放在变量Mxin中，并导出。

export const Mixin = {
  data() {
    return {
      num:12
    }
  },
  mounted() {
         console.log('刷新一次');
  },
}

 导入并放置于对象中

以下是在组件.vue文件中导入Mixin，然后在组件代码中加上mixins这个属性。

//导入
import {Mixin} from '@/common/mixin';


//在组件中加上这句代码
mixins: [Mixin]

注意

1. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

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

3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

4. 引入同一个mixin文件的组件，会共享mixin里面的data和methods等等。

例子

当mixin文件中的created()调用sayHi且Home文件中也有sayHi时，合并之后，实际调用的只有Home文件中的sayHi。