談?wù)剉ue中mixin的一點(diǎn)理解
vue中提供了一種混合機(jī)制--mixins，用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用。最開(kāi)始我一度認(rèn)為這個(gè)和組件好像沒(méi)啥區(qū)別。。后來(lái)發(fā)現(xiàn)錯(cuò)了。下面我們來(lái)看看mixins和普通情況下引入組件有什么區(qū)別？
組件在引用之后相當(dāng)于在父組件內(nèi)開(kāi)辟了一塊單獨(dú)的空間，來(lái)根據(jù)父組件props過(guò)來(lái)的值進(jìn)行相應(yīng)的操作，單本質(zhì)上兩者還是涇渭分明，相對(duì)獨(dú)立。
而mixins則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充了。
單純組件引用：
父組件 + 子組件 >>> 父組件 + 子組件
mixins：
父組件 + 子組件 >>> new父組件
值得注意的是，在使用mixins時(shí)，父組件和子組件同時(shí)擁有著子組件內(nèi)的各種屬性方法，但這并不意味著他們同時(shí)共享、同時(shí)處理這些變量，兩者之間除了合并，是不會(huì)進(jìn)行任何通信的。最開(kāi)始看到mixins的時(shí)候，天真的我似乎看到了一種向下的類(lèi)似vuex的數(shù)據(jù)共享方案，心情十分激動(dòng)啊。
下面給大家介紹下Vue中的mixin
一，mixin是什么
mixin文件是一個(gè)對(duì)象，可以包含vue組件的任意成分。是分發(fā)Vue組件可復(fù)用功能的非常靈活的方式，當(dāng)mixin被組件使用時(shí)，所有minxin里的屬性/方法會(huì)與組件里的屬性/方法混合。
二，mixin使用
在Vue組件中可以有mixins屬性，該屬性值類(lèi)型為數(shù)組。將mixin引入，作為mixins數(shù)組的元素mixins: [mixin]
組件A應(yīng)用了mixin，兩者的屬性如methods,components和directives，將被混合為同一個(gè)對(duì)象，如果methods,components和directives中有同名的屬性，則mixin中的將會(huì)被忽略。同名鉤子函數(shù)會(huì)組成數(shù)組并都會(huì)被調(diào)用，并且mixin的鉤子函數(shù)會(huì)比組件的鉤子函數(shù)先被調(diào)用。
總結(jié)
以上所述是小編給大家介紹的vue中mixin，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件
在開(kāi)發(fā)中如果上傳的文件過(guò)大,可以考慮分片上傳,分片就是說(shuō)將文件拆分來(lái)進(jìn)行上傳,將各個(gè)文件的切片傳遞給后臺(tái),然后后臺(tái)再進(jìn)行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01
VUE el-tree組件左邊勾選，右邊清除交互問(wèn)題
這篇文章主要介紹了VUE el-tree組件左邊勾選，右邊清除交互問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)完整代碼
作為一個(gè)AI模型,人臉識(shí)別涉及到多個(gè)技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue中如何引入html靜態(tài)頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個(gè)樣式出現(xiàn)時(shí)，就會(huì)導(dǎo)致樣式?jīng)_突，本文介紹了具體解決方法2017-08-08
vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析
這篇文章主要介紹了vue過(guò)濾器實(shí)現(xiàn)日期格式化的案例分析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue3+vite多項(xiàng)目多模塊打包(基于vite-plugin-html插件)
這篇文章主要給大家介紹了關(guān)于vue3+vite基于vite-plugin-html插件實(shí)現(xiàn)多項(xiàng)目多模塊打包的相關(guān)資料,現(xiàn)在很多小伙伴都已經(jīng)使用Vite+Vue3開(kāi)發(fā)項(xiàng)目了,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue3中useLocalStorage用法的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下2023-10-10
最近學(xué)習(xí)了hooks,特地寫(xiě)一篇文章加深一下印象,下面這篇文章主要給大家介紹了關(guān)于vue3?hook自動(dòng)導(dǎo)入原理及使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10