目錄

• 前言
• 使用方法
• 總結

前言

中有一個設定項叫做混入 （mixins）,它的使用是用來做程式碼複用的。同時， 這個mixins 也分為區域性混入和全域性混入

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

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

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

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

第二個元件是 student元件

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

使用方法

1、建立一個 mixin 檔案， 並把相應的資料 暴露出去

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

2、先說一個區域性混入， 區域性混入， 就是說在 VueCompoExSmPnuAaZnet 中一個個混中， 全域性混入呢， 那當然就是在 Vue (Vm) 物件上混入

下面是區域性混入的寫法

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

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

以上就是區域性混入的，它是在每一個 VueComponet中都要混入一下

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

方法如下

在 main.檔案中 引入

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

最後， 就要說一下， 混入的方法， 屬性， 鉤子函式， 如果本地已有的話， 產生衝突會是什麼情況，如果本元件中有和混入的方法， 屬性， 同名字的， 以本元件中的為主， 混入的不生效

但是 生命週期鉤子函式 不管是本元件中的， 還是混入的， 都是會生效的， 並且， 會先執行混入的生命週期鉤子， 再執行本元件的生命週期鉤子

總結

到此這篇關於vue中混入 mixins使用方法的文章就介紹到這了,更多相關vue混入 mixins使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！