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>