Vue Mixins混入介紹與使用

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

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

混入(Mixins)介紹

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

通俗的講

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

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

再通俗的講

就是將項目中使用頻繁的方法，提取出一個文件中

在哪個頁面中使用的時候，再混入進來，也就是引用進來

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

Mixins使用

1，建立js文件

文件名隨便，我建立一個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中的點擊事件");
    },
  },
};

3，頁面局部混入

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

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

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

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

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

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

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

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

全局混入

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

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

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

頁面中使用直接就可以this.名字進行使用，

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

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

您可能感興趣的文章:

淺談Vue中插槽slot的使用方法
這篇文章主要給大家分享了 Vue中插槽slot的使用方法，下面文章內(nèi)容圍繞插槽slot的相關資料展開其的使用方法,需要的朋友可以參考一下，希望多大家有所幫助
2021-11-11
詳解如何在vue項目中使用lodop打印插件
這篇文章主要介紹了詳解如何在vue項目中使用lodop打印插件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
vant/vue跨域請求解決方案
這篇文章主要介紹了vant/vue跨域請求解決方案,需要的朋友可以參考下
2022-12-12
Vue實現(xiàn)向PDF文件中添加二維碼
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)向PDF文件中添加二維碼的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2023-06-06
vue element upload組件 file-list的動態(tài)綁定實現(xiàn)
這篇文章主要介紹了vue element upload組件 file-list的動態(tài)綁定實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
vue之keepAlive使用案例詳解
這篇文章主要介紹了vue之keepAlive使用案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-09-09
Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能案例分析
這篇文章主要介紹了Vue.js遞歸組件實現(xiàn)組織架構(gòu)樹和選人功能,本文通過案例代碼講解的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-07-07
前端vue3使用axios調(diào)用后端接口的實現(xiàn)方法
vue本身不支持ajax接口的請求,所以在vue中經(jīng)常使用axios這個接口請求工具,下面這篇文章主要給大家介紹了關于前端vue3使用axios調(diào)用后端接口的實現(xiàn)方法,需要的朋友可以參考下
2022-12-12
vue基于better-scroll仿京東分類列表
這篇文章主要為大家詳細介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
vuex中的四個map方法的使用小結(jié)
vuex里面有四個map方法，他們分別可以針對不同的元素進行不同的代碼生成，本文就來詳細的介紹一下vuex中的四個map方法，具有一定的參考價值，感興趣的可以了解一下
2023-05-05