vue中mixins的使用方法和注意點(詳)


mixins基礎概況

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

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

怎么用?

舉個栗子:

  • 定義一個混入對象

  • 把混入對象混入到當前的組件中

用法似不似相當簡單呀

mixins的特點

1 方法和參數在各組件中不共享

混合對象中的參數num

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

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

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


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

2 值為對象的選項,如methods,components等,選項會被合並,鍵沖突的組件會覆蓋混入對象的

混入對象中的方法

組件中的方法

打印台的輸出

3 值為函數的選項,如created,mounted等,就會被合並調用,混合對象里的鈎子函數在組件里的鈎子函數之前調用

混入對象函數中的console

組件函數中的console

打印台的打印

與vuex的區別

經過上面的例子之后,他們之間的區別應該很明顯了哈~

  • vuex:用來做狀態管理的,里面定義的變量在每個組件中均可以使用和修改,在任一組件中修改此變量的值之后,其他組件中此變量的值也會隨之修改。

  • Mixins:可以定義共用的變量,在每個組件中使用,引入組件中之后,各個變量是相互獨立的,值的修改在組件中不會相互影響

與公共組件的區別

同樣明顯的區別來再列一遍哈~

  • 組件:在父組件中引入組件,相當於在父組件中給出一片獨立的空間供子組件使用,然后根據props來傳值,但本質上兩者是相對獨立的。

  • Mixins:則是在引入組件之后與組件中的對象和方法進行合並,相當於擴展了父組件的對象與方法,可以理解為形成了一個新的組件。

當mixins里有異步請求的時候,在組件中怎么獲取異步請求的返回值,請看下一篇

https://www.cnblogs.com/fsg6/p/14470817.html


免責聲明!

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



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