Vue中Mixins使用

mixins是一种分发Vue组件中可复用功能的一种灵活方式。

mixins是一个JavaScript对象，可以包含组件中的任意选项，比如Vue实例中生命周期的各个钩子函数，也可以是data、components、methods或directives等。在Vue中，mixins为我们提供了在Vue组件中共用功能的方法。使用方式很简单，将共用的功能以对象的方式传入mixins选项中。当组件使用mixins对象时，所有mixins对象的选项都将被混入该组件本身的选项。

简单的说：可以将页面上复用的代码提取出来放在一个js文件里，通过使用mixins引用，页面上可以直接使用mixins里的方法或值等。

数据data合并：以组件数据优先

钩子函数合并：会全部被合并到一个数组中，因此都会被执行，并且mixins对象中的钩子会先被执行。

值为对象选项合并：比如methods、components和directives，将被混合为同一个对象。当两个对象键名冲突时，组件选项优先。

使用方法

mixins.js

  export const Mixin1 = {
    data() {
      return {
        msg:'111'
      };
    },
    methods: {
      fn1() {
        ...
      },
    }
  };
  export const Mixin2 = {
    methods: {
      fn2() {
      ...
      },
    }
  };

HelloWorld.vue

<template>
    <div>
        <button @click="fn2">{{msg}}</button>
    </div>
</template>
<script>
  import {Mixin1, Mixin2} from "./mixins.js";

  export default {
    name: "HelloWorld",
    mixins: [Mixin1, Mixin2]
  };
</script>