Vue中有一個設定項叫做混入 （mixins）, 它的使用是用來做代碼復用的，同時， 這個mixins 也分為區域混入和全域混入
應用場景
下面先說一下 mixins 的應用場景， 假設現在我們兩個組件， 當這兩個組件被點擊時， 都要 console.log 一下， data 中的一個name 屬性的值
第一個組件是 school組件，如下圖
第二個組件是 student組件
我們可以看到， 不同的兩個組件， 有一個相同功能的方法， 這種寫法會導到， 我們要在兩個組件中寫出同樣的代碼， 兩個組件還可以接受， 如果有 200個組件都要這樣的功能， 是不是很煩人的感覺， 這時我們就可以使用 mixins 來復用代碼
使用方法
- 創建一個 mixin 檔案， 并把相應的資料 暴露出去
既然暴露出來的， 那肯定是給別人用的， 當然是給組件用的
- 先說一個區域混入， 區域混入， 就是說在 VueComponet 中一個個混中， 全域混入呢， 那當然就是在 Vue (Vm) 物件上混入
下面是區域混入的寫法
同樣的， 對student 組件也進行這樣的操作
完成后， 當我們點擊時， 功能同樣的可以完成， 而 showName 的方法， 就是我們通過 mixins 混入的， 我們只寫了一次
以上就是區域混入的，它是在每一個 VueComponet中都要混入一下
- 說一下全域混入， 我們把它混入到 Vue 的物件中， 這樣， vue 下的 所有組件，都會有這個方法，不用每一個組件去寫了，這種寫法是在 確定所有的組件都需要這個方法或屬性時才用的， 一般我們不會這樣用的
方法如下
在 main.js檔案中 引入
以上就是全域混入， 一般用的不多， 因為， 所有組件， 所有組件， 所有組件 都會被混入， 很少有這種需求
最后， 就要說一下， 混入的方法， 屬性， 鉤子函式， 如果本地已有的話， 產生沖突會是什么情況，
如果本組件中有和混入的方法， 屬性， 同名字的， 以本組件中的為主， 混入的不生效
但是 生命周期鉤子函式 不管是本組件中的， 還是混入的， 都是會生效的， 并且， 會先執行混入的生命周期鉤子， 再執行本組件的生命周期鉤子
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/317946.html
標籤：其他