web項(xiàng)目開(kāi)發(fā)VUE的混入與繼承原理
更新時(shí)間：2021年09月23日 15:39:39 作者：SpringSir
這篇文章主要介紹了web項(xiàng)目開(kāi)發(fā)中VUE的混入與繼承原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
混入
- 將多個(gè)vue文件內(nèi)重復(fù)使用的功能代碼，提取成單個(gè)js文件，在需要使用的地方進(jìn)行調(diào)用即可。
- 在一個(gè)js文件內(nèi)定義一個(gè)對(duì)象, 在對(duì)象中可以寫(xiě) vue文件內(nèi)的 data 、methods、components等所有<script>中可以定義的代碼。
混入注意(重名情況)
- 組件中的 data變量名 和 混入中的 data變量 名, 發(fā)生重名時(shí), 以組件為準(zhǔn);
- 組件中的 methods，computed，wath名稱 和 混入中的 methods，computed，wath名稱 名, 發(fā)生重名時(shí), 以組件為準(zhǔn);
- 組件中的 生命鉤子函數(shù) 和 混入中的 生命鉤子函數(shù) 名, 發(fā)生重名時(shí), 都會(huì)執(zhí)行, 但是組件中的鉤子函數(shù)優(yōu)先執(zhí)行 ;
局部混入
全局混入
定義及全局注冊(cè)
調(diào)用
繼承
- 注意：這里是不適合多繼承的，多繼承問(wèn)題出現(xiàn)會(huì)多。
- extends除了可以繼承 .vue 文件，而且可以和 mixin一樣使用 js文件內(nèi)的對(duì)象。
- extends繼承 .vue 文件內(nèi)的 template內(nèi)的html是無(wú)法繼承的
混入和繼承的區(qū)別
- 先看看官方文檔的定義, 其實(shí)兩個(gè)都可以理解為繼承;
- mixins接收對(duì)象數(shù)組（可理解為多繼承）;
- extends接收的是對(duì)象或函數(shù)（可理解為單繼承）。
- 注意: 如果一個(gè)組件, 既使用 繼承, 又使用 混入, 它們二者中如果有重名, 則混入會(huì)覆蓋繼承
以上就是web項(xiàng)目開(kāi)發(fā)VUE的混入與繼承原理的詳細(xì)內(nèi)容，更多關(guān)于web開(kāi)發(fā)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié)
Vue.js中Computed和Methods是兩種常用的數(shù)據(jù)處理方式,本文主要介紹了vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
最近遇到這樣的需求點(diǎn)擊某一個(gè)節(jié)點(diǎn)，彈窗，直接定位到點(diǎn)擊的節(jié)點(diǎn)，高亮并顯示數(shù)據(jù)，下面小編給大家?guī)?lái)了vue table直接定位到指定元素的操作代碼,需要的朋友可以參考下2022-11-11
vue項(xiàng)目打包后上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽
這篇文章主要介紹了vue項(xiàng)目打包后上傳至GitHub并實(shí)現(xiàn)github-pages的預(yù)覽，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
uniapp Vue3中如何解決web/H5網(wǎng)頁(yè)瀏覽器跨域的問(wèn)題
存在跨域問(wèn)題的原因是因?yàn)闉g覽器的同源策略,也就是說(shuō)前端無(wú)法直接發(fā)起跨域請(qǐng)求,同源策略是一個(gè)基礎(chǔ)的安全策略,但是這也會(huì)給uniapp/Vue開(kāi)發(fā)者在部署時(shí)帶來(lái)一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網(wǎng)頁(yè)瀏覽器跨域的問(wèn)題,需要的朋友可以參考下2024-06-06
vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Grid拖拽布局
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Grid拖拽布局,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
關(guān)于vue 結(jié)合原生js 解決echarts resize問(wèn)題
這篇文章主要介紹了關(guān)于vue 結(jié)合原生js 解決echarts resize問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于Vue前端生成UUID的相關(guān)資料,前端需要生成一個(gè)唯一標(biāo)識(shí)符作為ID時(shí),可以使用Vue UUID插件,比如生成訂單號(hào)、用戶ID等等,需要的朋友可以參考下2023-09-09
淺談vue方法內(nèi)的方法使用this的問(wèn)題
今天小編就為大家分享一篇淺談vue方法內(nèi)的方法使用this的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue單頁(yè)緩存存在的問(wèn)題及解決方案(小結(jié))
這篇文章主要介紹了vue單頁(yè)緩存存在的問(wèn)題及解決方案(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09