Vue中mixin的理解
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:則是在引入元件之後與元件中的物件和方法進行合併,相當於擴充套件了父元件的物件與方法,可以理解為形成了一個新的元件。
來源:https://www.jianshu.com/p/f34863f2eb6d
相關文章
- vue.js中mixin的使用。Vue.js
- vue3中mixin的使用方法Vue
- Vue Mixin混入Vue
- 理解 Dart mixin 機制Dart
- 說說你對vue的mixin的理解,有什麼應用場景?Vue
- Vue中$nextTick的理解Vue
- 徹底理解 Dart mixin 機制Dart
- 為什麼Vue.mixin中的定義的data全域性可用Vue
- Vue元件公用方法如何提取mixinVue元件
- 如何正確的(?)利用 Vue.mixin() 偷懶Vue
- 從mixin機制理解Flutter App啟動FlutterAPP
- 從Mixin到hooks,談談對React16.7.0-alpha中即將引入的hooks的理解HookReact
- Vue中keep-alive元件的理解VueKeep-Alive元件
- Vue中diff演算法的理解Vue演算法
- 深入理解Vue中的slots/scoped slotsVue
- vue混入mixin的使用,保證你看的明明白白!Vue
- vue.js3 學習筆記 (一)——mixin 混入Vue.jsS3筆記
- 關於Vue中插槽的理解和總結Vue
- Vue原始碼學習(七):合併生命週期(混入Vue.Mixin)Vue原始碼
- Vue-SSR: head Mixin 實現頭部資訊管理Vue
- [譯]Flutter - Dart的MixinFlutterDart
- SCSS @mixinCSS
- Vue中keep-alive的深入理解和使用VueKeep-Alive
- 深入理解vue中的slot與slot-scopeVue
- vue: 從一個下拉框元件理解vue中的父子通訊Vue元件
- 對VUE框架的理解Vue框架
- Vue中的基礎過渡動畫原理解析Vue動畫
- sass的mixin,extend,placeholder,functionFunction
- 對Vue插槽slot的理解Vue
- Vue生命週期的理解Vue
- 1. 對Vue的理解Vue
- Vue的生命週期的理解Vue
- JS每日一題:vue中keepalive怎麼理解?JS每日一題Vue
- SCSS @mixin傳參CSS
- Python Mixin解釋Python
- what is the Mixin method in Python?Python
- 如何理解vue的key屬性Vue
- 個人對於vue的理解Vue