vue中mixin的理解與用法

vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的復用。最開始我一度認為這個和組件好像沒啥區別。。后來發現錯了。下面我們來看看mixins和普通情況下引入組件有什么區別？

組件在引用之后相當於在父組件內開辟了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。

而mixins則是在引入組件之后，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合並。相當於在引入后，父組件的各種屬性方法都被擴充了。

 單純組件引用：

          父組件 + 子組件 >>> 父組件 + 子組件

     mixins：

          父組件 + 子組件 >>> new父組件

作用：多個組件可以共享數據和方法，在使用mixin的組件中引入后，mixin中的方法和屬性也就並入到該組件中，可以直接使用。鈎子函數會兩個都被調用，mixin中的鈎子首先執行。

先看一下簡單的使用方法：

建立一個mixin.js

export default {
    data() {
     return {
      mixinName: 'mixin'
     }
    },
    created() {
     console.log('mixin...', this.mixinName);
    },
    mounted() {},
    methods: {}
}

在vue文件中使用mixin

import mixin from '@/mixin'; // 引入mixin文件

export default {
 mixins: [mixin]
}

發現，mixin.js里的代碼執行了，而且先於父組件同鈎子函數內的方法先執行！！！

注意，mixin中的方法名重復的話，會以父組件的方法為主，這個重復可以自己來避免。

 

 

上訴是簡單的mixin的使用，稍微復雜點的可以，將mixin分塊

例如，我們可以建立一個文件夾，名叫mixins

 里邊的沒一個js文件就是一個mixin塊兒，這樣可以讓模塊更清晰

在父組件內引入：

import resize from '@/mixins/resize'

export default {
  mixins: [resize],
}

當然，上訴只有一個resize模塊，如果有多個的話在數組內寫上就可以了

感覺mixin有很大的好處，我們可以將代碼分隔的更加清晰，復用性將更加好！！