Vue中mixins的使用方法詳解

更新時間：2024年03月15日 08:51:54 作者：代碼搬運媛

mixins是一種分發(fā) Vue 組件中可復用功能的使用方式,它是一個 js 對象,包含我們組件script中的任意功能選項,下面就跟隨小編一起來看看它的具體使用吧

1 什么是mixins

它是一種分發(fā) Vue 組件中可復用功能的使用方式，mixins 是一個 js 對象，包含我們組件script中的任意功能選項，如：data、components、methods、created、computed 等等。我們只要將公用的功能以對象的方式傳入 mixins 選項中，當組件使用 mixins 對象，所有 mixins 對象的選項都將被擴展到該組件本身的選項中，提高代碼的重用性，易于代碼維護。

當多個組件中的數(shù)據或功能很相近時，可以通過 mixins 將公共部分提取出來，進行封裝。

2 創(chuàng)建并使用 mixins

在 src 文件夾創(chuàng)建 mixins 文件夾，在文件夾下創(chuàng)建一個 js 文件，在這個 js 對象中可以定義 data、components、methods、created、computed 等屬性，并通過 export 導出該對象。

在需要調用的組件中引入 mixins 文件即可。

3 注意事項

（1）方法和參數(shù)在不同組件中不共享

即其他組件無法從當前組件中獲取 mixins 中的數(shù)據和方法，很好的做到了數(shù)據隔離的效果。

// 在 myMixins.js 中定義一個 age 字段和 getAge 方法,用來獲取年齡信息
export const myMixins = {
  data() {
    return {
      age: 18,
    }
  },
  mounted() {
    this.getAge()
  },
  methods: {
    getAge() {
      console.log(this.age)
    }
  }
}

// 在第一個組件中引入 mixins，并且對 age 加1 
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    this.age++
  },
}
// 發(fā)現(xiàn)控制臺輸出 19，說明當前組件的 age 變化了

（2）合并沖突

當 mixins 的值為對象(components、methods 、computed、data)，混入到某個組件中時，選項會被合并。當對象名稱沖突時優(yōu)先組件，組件中的值會覆蓋混入對象的。

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {}
  },
  created() {
    console.log('data from mixins')
  }
}
// 組件中引入 mixins
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log('data from template')
  }
}
// 先輸出混入對象的值，再輸入組件的值
// data from mixins
// data from template

（3）異步請求

當混入里面包含異步請求函數(shù)，而我們又需要在組件中使用異步請求函數(shù)的返回值時，我們會取不到此返回值，解決方案是：不要返回結果，而是直接返回異步函數(shù)

// myMixins.js 中直接返回異步函數(shù)
export const myMixins = {
  components:{},
  data() {
    return {
      num: 1,
    }
  },
  methods: {
   async getDate1() {
      let result = await new Promise((resolve,reject) => {
          let a = 1;
          setTimeout(() => {
            resolve(1)
          },500)
       })
       return result
    },
  }
}
// 組件中獲取混入的異步函數(shù)，通過then 方法獲取函數(shù)值。
import { myMixins } from "./myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  mounted() {
    this.getDate1().then(res => {
      console.log(res)
    })
  }
}

到此這篇關于Vue中mixins的使用方法詳解的文章就介紹到這了,更多相關Vue mixins內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: