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

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

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

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

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

三、項(xiàng)目中如何使用混入

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

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

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

1.定義混入對(duì)象

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

export default {
	data(){
	return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
	},
	filters: { //過濾器
		numToString(value) {
			return value.toString();
		}
	},
	created(){ //鉤子函數(shù)
		    console.log('這是混入的組件')
	},
	computed: {   //計(jì)算屬性
		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對(duì)象
  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.存在的問題：

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

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

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

四、與vuex的區(qū)別

vuex：用來做狀態(tài)管理的，里面定義的變量在每個(gè)組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會(huì)隨之修改。

Mixins：可以定義共用的變量，在每個(gè)組件中使用，引入組件中之后，各個(gè)變量是相互獨(dú)立的，值的修改在組件中不會(huì)相互影響。

五、與公共組件的區(qū)別

組件：在父組件中引入組件，相當(dāng)于在父組件中給出一片獨(dú)立的空間供子組件使用，然后根據(jù)props來傳值，但本質(zhì)上兩者是相對(duì)獨(dú)立的。

Mixins：則是在引入組件之后與組件中的對(duì)象和方法進(jìn)行合并，相當(dāng)于擴(kuò)展了父組件的對(duì)象與方法，可以理解為形成了一個(gè)新的組件。

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

最新評(píng)論