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)文章
這篇文章主要為大家詳細(xì)介紹了vue組件間通信子與父的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue使用自定義事件的表單輸入組件用法詳解【日期組件與貨幣組件】
這篇文章主要介紹了vue使用自定義事件的表單輸入組件用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js日期組件與貨幣組件相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-06-06
element-ui 表格數(shù)據(jù)時(shí)間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時(shí)間格式化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue中實(shí)現(xiàn)動(dòng)畫效果的多種方法小結(jié)
平時(shí)我們能在網(wǎng)頁上看到很多動(dòng)畫效果,這些效果看起來就很引人注目,我們是不是也可以在自己的項(xiàng)目中添加一些動(dòng)畫效果,讓我們的頁面看起來更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實(shí)現(xiàn)動(dòng)畫效果的多種方法,需要的朋友可以參考下2024-07-07
我們知道使用webpack打包vue項(xiàng)目后會(huì)生成一個(gè)dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運(yùn)行呢?這篇文章主要給大家介紹了關(guān)于vue打包之后的dist文件如何運(yùn)行的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue如何動(dòng)態(tài)加載本地圖片的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
Vue使用el-table實(shí)現(xiàn)自適應(yīng)列寬
這篇文章主要為大家詳細(xì)介紹了Vue使用el-table實(shí)現(xiàn)自適應(yīng)列寬，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，json數(shù)組數(shù)據(jù)以csv格式導(dǎo)出,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
組件(Component)是 Vue.js 最強(qiáng)大的功能之一。 組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼。下面這篇文章主要給大家介紹了關(guān)于Vue.js組件間循環(huán)引用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
本篇文章主要介紹了淺談vue路徑優(yōu)化之resolve，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10