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

mixins基礎(chǔ)概況

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

混入 (mixins): 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?;烊雽ο罂梢园我饨M件選項。當(dāng)組件使用混入對象時,所有混入對象的選項將被混入該組件本身的選項。

怎么用?

舉個栗子:

定義一個混入對象

把混入對象混入到當(dāng)前的組件中

用法似不似相當(dāng)簡單呀

mixins的特點

1 方法和參數(shù)在各組件中不共享

混合對象中的參數(shù)num

組件1中的參數(shù)num進(jìn)行+1的操作

組件2中的參數(shù)num未進(jìn)行操作

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

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

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

混入對象中的方法

組件中的方法

打印臺的輸出

3 值為函數(shù)的選項,如created,mounted等,就會被合并調(diào)用,混合對象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調(diào)用

混入對象函數(shù)中的console

組件函數(shù)中的console

打印臺的打印

與vuex的區(qū)別

經(jīng)過上面的例子之后,他們之間的區(qū)別應(yīng)該很明顯了哈~

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

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

與公共組件的區(qū)別

同樣明顯的區(qū)別來再列一遍哈~

組件:在父組件中引入組件,相當(dāng)于在父組件中給出一片獨立的空間供子組件使用,然后根據(jù)props來傳值,但本質(zhì)上兩者是相對獨立的。

Mixins:則是在引入組件之后與組件中的對象和方法進(jìn)行合并,相當(dāng)于擴(kuò)展了父組件的對象與方法,可以理解為形成了一個新的組件。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • mixins基礎(chǔ)概況 vue中的解釋是這樣的,如果覺得語言枯燥的可以自行跳過嘿~ 混入 (mixins): 是一種...
    kangaroo_v閱讀 13,029評論 0 20
  • 1、LESS的官網(wǎng):http://lesscss.org 2、Sass官網(wǎng)地址:http://sass-lang....
    Howie223閱讀 3,952評論 0 5
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,186評論 0 29
  • 什么是 Docker? Docker 是一種 Linux 容器技術(shù),一種高效、敏捷、和輕量級的容器解決方案,并且支...
    鳳落溪凰落地閱讀 627評論 0 0
  • 裴昀。 懶倚軟榻,執(zhí)卷而閱。但聞檐下雨聲三四,叩門清響。披衣起身,啟門詫之。忽見一人雨中而立,假面遮眸。雖露漫體側(cè)...
    未熄閱讀 925評論 1 1

友情鏈接更多精彩內(nèi)容