前言

Vue中有一個設置項叫做混入 （mixins）, 它的使用是用來做代碼復用的。同時， 這個mixins 也分為局部混入和全局混入

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

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

下面先說一下 mixins 的應用場景， 假設現(xiàn)在我們兩個組件， 當這兩個組件被點擊時， 都要 console.log 一下， data 中的一個name 屬性的值

第一個組件是 school組件，如下圖

第二個組件是 student組件

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

使用方法

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

既然暴露出來的， 那肯定是給別人用的， 當然是給組件用的

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

下面是局部混入的寫法

同樣的， 對student 組件也進行這樣的操作

完成后， 當我們點擊時， 功能同樣的可以完成， 而 showName 的方法， 就是我們通過 mixins 混入的， 我們只寫了一次

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

3、說一下全局混入， 我們把它混入到 Vue 的對象中， 這樣， vue 下的 所有組件，都會有這個方法，不用每一個組件去寫了，這種寫法是在 確定所有的組件都需要這個方法或屬性時才用的， 一般我們不會這樣用的

方法如下

在 main.js文件中 引入

以上就是全局混入， 一般用的不多， 因為， 所有組件， 所有組件， 所有組件 都會被混入。 很少有這種需求

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

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

總結

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

最新評論