Vue 中mixin 的用法詳解
更新時間：2018年04月23日 10:24:56 投稿：mrr
e中提供了一種混合機制--mixins，用來更高效的實現組件內容的復用。這篇文章主要介紹了Vue mixin 的用法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
說下我對vue中mixin的一點理解
vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的復用。最開始我一度認為這個和組件好像沒啥區(qū)別。。后來發(fā)現錯了。下面我們來看看mixins和普通情況下引入組件有什么區(qū)別？
組件在引用之后相當于在父組件內開辟了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。
而mixins則是在引入組件之后，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合并。相當于在引入后，父組件的各種屬性方法都被擴充了。
單純組件引用：
父組件 + 子組件 >>> 父組件 + 子組件
mixins：
父組件 + 子組件 >>> new父組件
作用：多個組件可以共享數據和方法，在使用mixin的組件中引入后，mixin中的方法和屬性也就并入到該組件中，可以直接使用。鉤子函數會兩個都被調用，mixin中的鉤子首先執(zhí)行。
下面給大家介紹vue mixin的用法，具體介紹如下所示：
1.定義一個 js 文件(mixin.js)
export default {
data() {
return {
name: 'mixin'
}
},
created() {
console.log('mixin...', this.name);
},
mounted() {},
methods: {}
}
關于用法，vue文檔中有詳細的介紹，這里只介紹怎么在一個vue文件中使用mixin。
2.在vue文件中使用mixin
import '@/mixin'; // 引入mixin文件
export default {
mixins: [mixin]
}
總結
以上所述是小編給大家介紹的Vue 中mixin 的用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
最近在寫一個關于vue的商城項目，然后集成在移動端中，開發(fā)需求中有一界面，類似淘寶商城評價界面！接下來通過本文給大家分享vue實現類似淘寶商品評價頁面星級評價及上傳多張圖片功能，需要的朋友參考下吧2018-10-10
這篇文章主要介紹了vue父子模板傳值問題解決方法,結合案例形式分析了vue.js父子模板傳值問題相關實現方法與具體操作步驟,需要的朋友可以參考下2020-02-02
本文給大家?guī)硪粋€小案例基于vue實現學生錄入系統(tǒng)功能，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
在vue3中新的組合式API中沒有this,那我們如果需要用到this怎么辦?下面這篇文章主要給大家介紹了關于Vue3中使用this的詳細教程,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vant Weapp組件踩坑:picker的初始賦值解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue項目開發(fā)中setTimeout等定時器的管理問題
這篇文章主要介紹了vue項目開發(fā)中setTimeout等定時器的管理問題,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue-i18n實現中英文切換的方法，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
store是一個狀態(tài)管理工具(vueX中只有唯一 一個store),下面這篇文章主要給大家介紹了關于Vuex拿到state中數據的3種方式與實例剖析的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue在自定義指令綁定的處理函數中傳遞參數方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue組件之間數據傳遞的方法,結合實例形式分析了vue.js父組件與子組件之間數據傳遞相關操作技巧,需要的朋友可以參考下2019-02-02