快捷導(dǎo)航

Vue中mixins混入的介紹與使用詳解

更新時間：2022年12月23日 16:36:13 作者：嬌花*

如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧

一、來自官網(wǎng)的描述

混入 (mixins)：是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

二、如何創(chuàng)建Mixins

在src目錄下創(chuàng)建一個mixins文件夾，文件夾下新建一個myMixins.js文件。前面我們說了mixins是一個js對象，所以應(yīng)該以對象的形式來定義myMixins，在對象中我們可以和vue組件一樣來定義我們的data、components、methods 、created、computed等屬性，并通過export導(dǎo)出該對象

export const myMixins = {
components:{},
data(){
return {}
},
created(){},
mounted(){},
computed(){},
methods: {}
}

三、項目中如何使用混入

在vue組件內(nèi)，如果想將一些公共功能，如組件、方法、鉤子函數(shù)等復(fù)用，混入是一個很好的選擇。下面簡單介紹一下混入的方式及特點(diǎn)。

你可以將一個對象作為混入的選項，在組件中復(fù)用。因為vue實(shí)例也是對象，所以你可以將vue實(shí)例作為混入選項傳遞進(jìn)去。

我們可以創(chuàng)建一個目錄mixins，在創(chuàng)建一個comment.js文件如圖：

1.定義混入對象

common.js 就是我們要混入其它組件的內(nèi)容：

export default {
	data(){
	return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
	},
	filters: { //過濾器
		numToString(value) {
			return value.toString();
		}
	},
	created(){ //鉤子函數(shù)
		    console.log('這是混入的組件')
	},
	computed: {   //計算屬性
		ids() {
				return  !this.loading
			 }
	},
	methods:{
     exm(){
      console.log('這是混入的exm方法')
      },
     clickFn(){
      console.log(this.msg)
    },
	// 其它屬性方法......
		}
}

2.定義使用混入的組件

test.vue組件用mixins把common.js內(nèi)容混入當(dāng)前組件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ form.a }}</h1>
    <button @click="buttonClick">current</button>
  </div>
</template>
<script>
//導(dǎo)入js文件
import fun from './mixins/common.js'
export default {
  name: "HelloWorld",
  mixins:[fun],  //混入 fnu對象
  created(){
    console.log('這是當(dāng)前組件')
  },
  data() {
    return {
      msg: "組件的msg"
    }
  },
  methods:{
    buttonClick(){
      console.log(this.form.a)
      console.log(this.msg)
      this.clickFn();
      this.exm();
    },
    exm(){
      console.log('這是組件的exm方法')
    }
  }
}
</script>

3.存在的問題：

混入的對象中的msg屬性，和組件的msg屬性沖突，以組件的值優(yōu)先。組件中沒有的屬性，混入對象中的生效。

同名鉤子函數(shù)將會合并成一個數(shù)組，都會調(diào)用，混入函數(shù)先調(diào)用

值為對象的選項，如methods，components，directives等，將會合并為一個新對象，如果鍵名沖突，組件的值優(yōu)先