天天看點

vue之混入(mixins)的使用方法

特點:1、方法和參數在各元件中不共享

   2、值為對象的選項,如methods,components等,選項會被合并,鍵沖突的元件會覆寫混入對象的

混入對象中的方法

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

混入對象函數中的console

與vuex的差別:

  • vuex:用來做狀态管理的,裡面定義的變量在每個元件中均可以使用和修改,在任一元件中修改此變量的值之後,其他元件中此變量的值也會随之修改。
  • Mixins:可以定義共用的變量,在每個元件中使用,引入元件中之後,各個變量是互相獨立的,值的修改在元件中不會互相影響。

與公共元件的差別:

  • 元件:在父元件中引入元件,相當于在父元件中給出一片獨立的空間供子元件使用,然後根據props來傳值,但本質上兩者是相對獨立的。
  • Mixins:則是在引入元件之後與元件中的對象和方法進行合并,相當于擴充了父元件的對象與方法,可以了解為形成了一個新的元件

demo:​​這是一個demo​​

當mixins裡有異步請求的時候,在元件中怎麼擷取異步請求的傳回值?

不要傳回結果而是直接傳回異步函數

demo:​​這是一個demo​​

demo:​​這是一個demo​​

使用場景:一般一些有重複方法的元件,可以考慮抽一個mixin。或者是比如一些頁面權限控制的内容,也可以考慮抽一個mixin