快捷導(dǎo)航

Vue Mixins混入介紹與使用

更新時(shí)間：2023年02月02日 08:30:42 作者：博主花神

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

混入(Mixins)介紹

混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能

通俗的講

將組件的公共邏輯或者配置提取出來進(jìn)行存放

哪個(gè)組件需要用到時(shí)，直接將提取的這部分混入到組件內(nèi)部即可

再通俗的講

就是將項(xiàng)目中使用頻繁的方法，提取出一個(gè)文件中

在哪個(gè)頁面中使用的時(shí)候，再混入進(jìn)來，也就是引用進(jìn)來

注意的是，這里提取的是邏輯和配置，也就是js等，可不是css和html

Mixins使用

1，建立js文件

文件名隨便，我建立一個(gè)mixins.js

2，mixins.js代碼

export const mixins = {
  data() {
    return {
      msg: "我是乞力馬扎羅",
    };
  },
  computed: {},
  created() {
    console.log("我是mixin中的created生命周期函數(shù)");
  },
  mounted() {
    console.log("我是mixin中的mounted生命周期函數(shù)");
  },
  methods: {
    getclick() {
      console.log("我是mixin中的點(diǎn)擊事件");
    },
  },
};

3，頁面局部混入

當(dāng)你想使用混入文件中的方法，頁面中直接可進(jìn)行this.方法名，調(diào)用
當(dāng)你想使用混入文件中的變量，頁面中直接可進(jìn)行this.變量名，調(diào)用
ata數(shù)據(jù)與組件中的data數(shù)據(jù)沖突時(shí)，組件中的data數(shù)據(jù)會覆蓋mixin中數(shù)據(jù)，方法名同樣如此
mixins: [mixin],注意，前者名字是vue提供的屬性名，不能改，中括號里的名字可以進(jìn)行更改，但得與import引入名一致

<script>
import mixin from "@/config/mixins.js"
	export default {
		mixins: [mixin],
		data() {
			return {
			};
		},
		onShow(){
			console.log(this.msg)//乞力馬扎羅
			console.log(this.getclick())//我是mixin中的點(diǎn)擊事件
		},
	}
</script>

好的，看一下其他人的總結(jié)

mixin中的生命周期函數(shù)會和組件的生命周期函數(shù)一起合并執(zhí)行

mixin中的data數(shù)據(jù)在組件中也可以使用。

mixin中的方法在組件內(nèi)部可以直接調(diào)用。

生命周期函數(shù)合并后執(zhí)行順序：先執(zhí)行mixin中的，后執(zhí)行組件的。

并且，一個(gè)組件中改動了mixin中的數(shù)據(jù)，另一個(gè)引用了mixin的組件的數(shù)據(jù)不受影響，不同組件中的mixin是相互獨(dú)立的！

全局混入

（不建議使用，容易造成污染）

修改main.js數(shù)據(jù)，進(jìn)行全局注冊

import mixins from "@/config/mixins.js"
Vue.mixin(mixins);

頁面中使用直接就可以this.名字進(jìn)行使用，

<script>
	export default {
		data() {
			return {
			};
		},
		onShow(){
			console.log(this.msg)//乞力馬扎羅
			console.log(this.getclick())//我是mixin中的點(diǎn)擊事件
		},
	}
</script>

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

您可能感興趣的文章: