快捷導(dǎo)航

Vue中mixins的使用方法詳解

更新時(shí)間：2024年03月15日 08:51:54 作者：代碼搬運(yùn)媛

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

1 什么是mixins

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

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

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

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

在需要調(diào)用的組件中引入 mixins 文件即可。

3 注意事項(xiàng)

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

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

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

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

（2）合并沖突

當(dāng) mixins 的值為對象(components、methods 、computed、data)，混入到某個(gè)組件中時(shí)，選項(xiàng)會(huì)被合并。當(dāng)對象名稱沖突時(shí)優(yōu)先組件，組件中的值會(huì)覆蓋混入對象的。

// 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）異步請求

當(dāng)混入里面包含異步請求函數(shù)，而我們又需要在組件中使用異步請求函數(shù)的返回值時(shí)，我們會(huì)取不到此返回值，解決方案是：不要返回結(jié)果，而是直接返回異步函數(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)
    })
  }
}

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

您可能感興趣的文章: