vue 2 中采用選項式API 如： data、methods、watch、computed以及生命周期鉤子函數(shù)等等。

mixin 混入，提供了一種非常靈活的方式，來分發(fā) vue 組件中的可復用功能，一個mixin 對象可以包含任意組件選項，當組件使用 mixin 對象時，所有的 mixin 對象的選項將被混入組件本身的選項。

一、mixin 如何使用 ？

通俗地講，mixin 對象把一些組件公用的選項，如data內(nèi)數(shù)據(jù)，方法、計算屬性、生命周期鉤子函數(shù)，單獨提取出來，然后在組件內(nèi)引入，就可以與組件本身的選項進行合并。

示例1：

<script>

const myMixin = {

 data(){

  return {

   num:520

  }

 },

 mounted(){

  console.log('mixin mounted');

 }

}

export default {

  mixins:[myMixin],

}

</script>

就相當于：

<script>

export default {

 data(){

  return {

   num:520

  }

 },

 mounted(){

  console.log('mixin mounted');

 }

}

</script>

這樣做的好處就是可以把多個組件公共選項抽取到一個 mixin 對象內(nèi)，需要的時候直接引入就可以了。

二、mixin 使用時注意點

mixin 包含的選項，同時組件內(nèi)也可以包含這些選項，如果 mixin 中包含的選項中，有部分屬性相同怎么辦？如 mixin 和組件內(nèi)都存在一個同名方法時，如何處理？或者都包含生命周期鉤子函數(shù)時，它們的執(zhí)行順序誰前誰后呢？接下來我們就看看，使用 mixin 時應該注意的點。

2.1、使用 mixin 對象時，組件內(nèi)部和 mixin 包含相同選項，如何處理呢？

示例2：mixin 對象和實例都包含data選項，內(nèi)部有兩個不同的變量

<template>

 <div>

  {{qdr}}  -   {{name}} 

 </div>

</template>

<script>

const myMixin = {

 data(){

  return {

   name:'熱愛前端的小姐姐'

  }

 }

}

export default {

 mixins:[myMixin],

 data(){

  return {

   qdr:"前端人"

  }

 }

}

</script>

運行后，我們發(fā)現(xiàn)兩個變量都能使用，mixin 對象中的 data 與實例中的 data 選項進行合并了。對于 methods 、computed 也是一樣的。

如果我們把上個實例中的兩個變量，修改成同名時，會怎樣呢？

2.2、使用的 mixin 對象選項 和實例中的選項擁有相同的屬性該如何處理？

示例3：data 內(nèi)擁有相同的變量名 name

<template>

 <div>

  {{name}} 

 </div>

</template>

<script>

const myMixin = {

 data(){

  return {

   name:'熱愛前端的小姐姐'

  }

 }

}

export default {

 mixins:[myMixin],

 data(){

  return {

   name:"前端人"

  }

 }

}

</script>

運行結(jié)果，name 值為 “前端人”。

屬性值相同時，會選擇就近原則，優(yōu)先繼承實例內(nèi)的值，所以 mixin 對象的屬性會被實例中的屬性給覆蓋掉。

2.3、mixin 對象也可以添加生命周期鉤子函數(shù)

mixin 和 實例中 的那個優(yōu)先執(zhí)行呢？

示例4：mixin 加入生命周期鉤子函數(shù)，以 mounted 為例

const myMixin = {

 mounted(){

  console.log('mixin mounted');

 }

}

export default {

 mixins:[myMixin],

 mounted(){

  console.log('mounted');

 }

}

運行結(jié)果：

我們發(fā)現(xiàn)生命周期函數(shù)會合并執(zhí)行，優(yōu)先執(zhí)行 mixin 中的， 然后再執(zhí)行實例中的。

三、mixin 自定義屬性

$options 用于當前組件實例 的初始化選項，需要在選項中包含自定義 property 時會有用處。

簡單講，$options 用于在實例中調(diào)用 mixin 自定義屬性。

示例5：添加自定義屬性

const myMixin = {

  custom:'自定義屬性'

 }

在實例中使用：



mounted(){

 console.log(this.$options.custom);

}

如果在實例中也包含一個同名自定義屬性時，優(yōu)先級會作何處理呢？如果我們想控制優(yōu)先級又該如何處理呢？

四、合并策略

optionMergeStrategies 選項合并策略，使用 mixin 自定義屬性和實例中的屬性沖突時，使用optionMergeStrategies 定義合并規(guī)則的，也就是優(yōu)先使用誰的問題。

使用規(guī)則：

app.config.optionMergeStrategies.propertyName=(mixinVal,appVal)=>{

  return appVal || mixinVal  // 確定優(yōu)先返回哪個屬性值

}

根據(jù)上述示例5，給實例中加 custom 屬性，運行查看結(jié)果。

示例6：驗證 mixin 和 實例 屬性優(yōu)先級

<script>

const myMixin = {

  custom:'mixin custom',

}

export default {

  custom:'app custom',

  mixins:[myMixin],

  mounted(){

    console.log(this.$options.custom); // 打印結(jié)果：app custom

  }

}

</script>

發(fā)現(xiàn)，mixin 對象中的屬性值被實例中屬性值覆蓋掉了。我們可以借用上述的 optionMergeStrategies 屬性，修改 custom 的合并規(guī)則。

在 main.js 文件內(nèi)引入：

app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{

 return mixinVal ||  appVal

}

再次運行之后，我們發(fā)現(xiàn)打印結(jié)果變成 mixin 中的屬性值了：

console.log(this.$options.custom); // 打印結(jié)果：mixin custom

五、全局配置 mixin

如果項目中有多個組件復用某些選項時，我們可以通過全局使用 mixin 對象。一個實例也可以引入多個 mixin 對象。

語法如下：

app.mixin([ {}, {}, {} ])

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

最新評論