混入(Mixins)介紹

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

通俗的講

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

哪個組件需要用到時，直接將提取的這部分混入到組件內(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>

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

最新評論