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>