Vue 之 Mixins (混入)的使用


是什么

混入 (mixins): 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被合並到組件本身,也就是說父組件調用混入對象的屬性時用this即可。

怎么用

舉個栗子:

定義一個混入對象

img

父組件引入混入對象

img

mixins的特點

1. 混入對象的方法和參數在不同的父組件中不共享

混合對象中的參數num

img

組件1中的參數num進行+1的操作

img

組件2中的參數num未進行操作

img

看兩組件中分別輸出的num值

img

img

可以看到,在組件1里改變了num里面的值,組件2中的num值還是混入對象里的初始值1

2. mixin的數據對象和組件的數據發生沖突時以組件數據優先。

img

組件中的方法

img

打印台的輸出

img

3. 鈎子函數

同名鈎子函數如created , mounted等將會混合為一個數組,都將被調用到,但是混入對象的鈎子將在父組件自身鈎子之前調用。

img

組件函數中的console

img

打印台的打印


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM