快捷導(dǎo)航

Vue中使用mixins混入方式

更新時(shí)間：2024年08月28日 10:28:23 作者：前端大斗師

這篇文章主要介紹了Vue中使用mixins混入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

mixins在Vue中的用法

一、mixins混入

混入（mixins）提供了一種非常靈活的方式，來(lái)分發(fā)vue組件中的可服用功能。一個(gè)混入對(duì)象可以包含任意的組件選項(xiàng)（vue在script的部分）。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)都將被“混合”進(jìn)入改組件本身的選項(xiàng)。

vue提供的一種混合機(jī)制，能夠更好的實(shí)現(xiàn)組件功能復(fù)用，混合對(duì)象（mixins）可以包含任意組件選項(xiàng)（data、created、mounted、methods、filters等），組件引入后相關(guān)選項(xiàng)會(huì)進(jìn)行合并，相當(dāng)于引入后，父組件各屬性進(jìn)行擴(kuò)充；

二、組件和mixins的區(qū)別

組件在引用之后相當(dāng)于在父組件內(nèi)開(kāi)辟了一塊單獨(dú)的空間，來(lái)根據(jù)父組件props過(guò)來(lái)的值進(jìn)行相應(yīng)的操作，本質(zhì)上兩者還是涇渭分明，相對(duì)獨(dú)立。

mixins則是在引入組件之后，是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充。

簡(jiǎn)單理解：減少代碼冗余，提高開(kāi)發(fā)效率，復(fù)用組件數(shù)據(jù)，方法等，以提高開(kāi)發(fā)速度

三、為什么使用mixins

mixins分為全局混入和局部混入，下面我們著重講局部混入
注意不同組件混入之后，會(huì)生成不同的實(shí)例，數(shù)據(jù)會(huì)相互隔離，互不影響
注意在引入mixins的同時(shí)，組件中重復(fù)定義，minxins中的屬性方法會(huì)被覆蓋
使用 mixins 之后，該組件包含 mixins 中的所有數(shù)據(jù)，并且可以使用 this 進(jìn)行訪問(wèn)。您也可以使用變量而不是單獨(dú)的文件來(lái)定義 mixins

四、Vue項(xiàng)目實(shí)際使用

新建src/minxins/index.js

// 引入下載文件接口
import { downTemplateFile } from '@/api/home'
// 導(dǎo)出 myMixins 函數(shù)
export const myMixins = {
  data() {
    return {

    }
  },
  methods: {
    // 下載方法，參數(shù)傳文件ID
    toLogin(id) {
      downTemplateFile({ id1: id }).then(res => {
        if (res.size != 97) {
          let blob = new Blob([res])
          let objectUrl = window.URL.createObjectURL(blob)
          if (navigator.msSaveBlob) {
            return navigator.msSaveBlo(blob, '下載文件.doc')
          } else {
            let a = document.createElement('a')
            document.body.appendChild(a);
            a.style.display = 'none'
            a.setAttribute('href', objectUrl)
            a.setAttribute('download', '下載文件.doc')
            a.click();
            URL.revokeObjectURL(objectUrl);
          }
        } else {
          this.$message.error('系統(tǒng)錯(cuò)誤，請(qǐng)稍后重試！')
        }
      })
    }
  }
}

index.vue引入注冊(cè)并使用mixins

<template>
  <div class="index">
    <button @click="downLoadTempFile(1)">觸發(fā)mixins下載方法</button>
  </div>
</template>
<script>
// 引入 myMixins 函數(shù)，導(dǎo)出什么就引入什么
import { myMixins } from '@/mixins';
export default {
  data(){
    return {
    }
  },
  // 注冊(cè)
  mixins: [myMixins],
  methods:{
    async downLoadTempFile(id){
      // 直接使用this.方法名就可以調(diào)用到myMixins里的方法
      this.toLogin(id)
    },
  }
}
</script>

五、全局混入(不推薦)

main.js

import Vue from 'vue'
import App from './App.vue'

import { myMixins } from "@/mixins"

Vue.mixin(myMixins);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')