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有很大的好處，咱們能夠將代碼分隔的更加清晰，複用性將更加好！！