Vue -- Mixin

mixins

mixin: 有兩個很是類似的組件，他們的基本功能是同樣的，能夠局註冊一個混合，影響註冊以後

全部建立的每一個 Vue 實例，這就是mixin。

Mixin對編寫函數式風格的代碼頗有用，通常狀況下不會改變函數做用域外部的任何東西，輸入相同，獲得的結果也必定相同。

基礎用法

新建一個mixin.js 文件，

minix.js
  
 export const myminix= {
       data(){
           return {
           }
       },
       mounted(){
          this.sayhello();
       },
       created(){

       },
       methods:{
           sayhello:function(){
              console.log("hello from myMinix!");
           }
       }
}

一個簡單的方法，在組件被掛載後 輸出 「hello」,

而後在想要使用這個公共方法的組件中引入進去。

other.vue

script:

export default {
 mixins:[myminix],
}

這樣引入後的效果，就是在other的組件中，一樣加入了sayhello() 方法

other.vue

script:

export default {
    mounted(){
              this.sayhello();
           },
    methods:{
           sayhello:function(){
              console.log("hello from myMinix!");
           }
}

//output  'hello from myMinix'

在other 組件被掛載後，輸出hello from myMinix,

衝突

---

到這裏，會有一個問題，若是other.vue 自己也有一樣是操做掛載在mounted 上，到底誰會先執行，

other.vue

script:

export default {
    mixins:[myminix],
    mounted(){
              this.sayhello();
           },
    methods:{
           sayhello:function(){
              console.log("hello from other instance!");
           }
}

//output  'hello from myMinix'
//output  'hello from myMinix'

輸出了兩次同樣的結果，都來自other 組件， 第一個函數被調用時，沒有被銷燬，它只是被重寫了。咱們在這裏調用了兩次sayhello()函數。

全局下注冊minix

好比在 vue-cli 構建的項目中，main.js 中定義了一個minix,而且掛載在vue 實例上，

Vue.mixin({
      mounted() {
         console.log("hello from other");
      }
 })

 new Vue({
    

  })

那麼在 Vue 實例下的每一個組件都會 在掛載的時候執行一次這個方法，輸出屢次 「hello from other」