前言

Vue中有一個(gè)設(shè)置項(xiàng)叫做混入 （mixins）, 它的使用是用來做代碼復(fù)用的。同時(shí)， 這個(gè)mixins 也分為局部混入和全局混入

vue中的解釋是這樣的，如果覺得語言枯燥的可以自行跳過嘿~

混入 (mixins)： 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。應(yīng)用場(chǎng)景

下面先說一下 mixins 的應(yīng)用場(chǎng)景， 假設(shè)現(xiàn)在我們兩個(gè)組件， 當(dāng)這兩個(gè)組件被點(diǎn)擊時(shí)， 都要 console.log 一下， data 中的一個(gè)name 屬性的值

第一個(gè)組件是 school組件，如下圖

第二個(gè)組件是 student組件

我們可以看到， 不同的兩個(gè)組件， 有一個(gè)相同功能的方法， 這種寫法會(huì)導(dǎo)到， 我們要在兩個(gè)組件中寫出同樣的代碼， 兩個(gè)組件還可以接受， 如果有 200個(gè)組件都要這樣的功能， 是不是很煩人的感覺， 這時(shí)我們就可以使用 mixins 來復(fù)用代碼

使用方法

1、創(chuàng)建一個(gè) mixin 文件， 并把相應(yīng)的數(shù)據(jù) 暴露出去

既然暴露出來的， 那肯定是給別人用的， 當(dāng)然是給組件用的

2、先說一個(gè)局部混入， 局部混入， 就是說在 VueComponet 中一個(gè)個(gè)混中， 全局混入呢， 那當(dāng)然就是在 Vue (Vm) 對(duì)象上混入

下面是局部混入的寫法

同樣的， 對(duì)student 組件也進(jìn)行這樣的操作

完成后， 當(dāng)我們點(diǎn)擊時(shí)， 功能同樣的可以完成， 而 showName 的方法， 就是我們通過 mixins 混入的， 我們只寫了一次

以上就是局部混入的，它是在每一個(gè) VueComponet中都要混入一下

3、說一下全局混入， 我們把它混入到 Vue 的對(duì)象中， 這樣， vue 下的 所有組件，都會(huì)有這個(gè)方法，不用每一個(gè)組件去寫了，這種寫法是在 確定所有的組件都需要這個(gè)方法或?qū)傩詴r(shí)才用的， 一般我們不會(huì)這樣用的

方法如下

在 main.js文件中 引入

以上就是全局混入， 一般用的不多， 因?yàn)椋?所有組件， 所有組件， 所有組件 都會(huì)被混入。 很少有這種需求

最后， 就要說一下， 混入的方法， 屬性， 鉤子函數(shù)， 如果本地已有的話， 產(chǎn)生沖突會(huì)是什么情況，如果本組件中有和混入的方法， 屬性， 同名字的， 以本組件中的為主， 混入的不生效

但是 生命周期鉤子函數(shù) 不管是本組件中的， 還是混入的， 都是會(huì)生效的， 并且， 會(huì)先執(zhí)行混入的生命周期鉤子， 再執(zhí)行本組件的生命周期鉤子

總結(jié)

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

最新評(píng)論