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

混入 (mixins)： 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項。當(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ù)用，混入是一個很好的選擇。下面簡單介紹一下混入的方式及特點。

你可以將一個對象作為混入的選項，在組件中復(fù)用。因為vue實例也是對象，所以你可以將vue實例作為混入選項傳遞進(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)先

四、與vuex的區(qū)別

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

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

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

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

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

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

最新評論