Vue 中mixin 的用法詳解
說下我對(duì)vue中mixin的一點(diǎn)理解
vue中提供了一種混合機(jī)制--mixins,用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用。最開始我一度認(rèn)為這個(gè)和組件好像沒啥區(qū)別。。后來發(fā)現(xiàn)錯(cuò)了。下面我們來看看mixins和普通情況下引入組件有什么區(qū)別?
組件在引用之后相當(dāng)于在父組件內(nèi)開辟了一塊單獨(dú)的空間,來根據(jù)父組件props過來的值進(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父組件
作用:多個(gè)組件可以共享數(shù)據(jù)和方法,在使用mixin的組件中引入后,mixin中的方法和屬性也就并入到該組件中,可以直接使用。鉤子函數(shù)會(huì)兩個(gè)都被調(diào)用,mixin中的鉤子首先執(zhí)行。
下面給大家介紹vue mixin的用法,具體介紹如下所示:
1.定義一個(gè) js 文件(mixin.js)
export default { data() { return { name: 'mixin' } }, created() { console.log('mixin...', this.name); }, mounted() {}, methods: {} }
關(guān)于用法,vue文檔中有詳細(xì)的介紹,這里只介紹怎么在一個(gè)vue文件中使用mixin。
2.在vue文件中使用mixin
import '@/mixin'; // 引入mixin文件 export default { mixins: [mixin] }
總結(jié)
以上所述是小編給大家介紹的Vue 中mixin 的用法詳解,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue實(shí)現(xiàn)類似淘寶商品評(píng)價(jià)頁面星級(jí)評(píng)價(jià)及上傳多張圖片功能
最近在寫一個(gè)關(guān)于vue的商城項(xiàng)目,然后集成在移動(dòng)端中,開發(fā)需求中有一界面,類似淘寶商城評(píng)價(jià)界面!接下來通過本文給大家分享vue實(shí)現(xiàn)類似淘寶商品評(píng)價(jià)頁面星級(jí)評(píng)價(jià)及上傳多張圖片功能,需要的朋友參考下吧2018-10-10vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能
本文給大家?guī)硪粋€(gè)小案例基于vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)功能,代碼簡單易懂非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07vue項(xiàng)目開發(fā)中setTimeout等定時(shí)器的管理問題
這篇文章主要介紹了vue項(xiàng)目開發(fā)中setTimeout等定時(shí)器的管理問題,需要的朋友可以參考下2018-09-09Vuex拿到state中數(shù)據(jù)的3種方式與實(shí)例剖析
store是一個(gè)狀態(tài)管理工具(vueX中只有唯一 一個(gè)store),下面這篇文章主要給大家介紹了關(guān)于Vuex拿到state中數(shù)據(jù)的3種方式與實(shí)例剖析的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vue組件之間數(shù)據(jù)傳遞的方法實(shí)例分析
這篇文章主要介紹了vue組件之間數(shù)據(jù)傳遞的方法,結(jié)合實(shí)例形式分析了vue.js父組件與子組件之間數(shù)據(jù)傳遞相關(guān)操作技巧,需要的朋友可以參考下2019-02-02