vue.js父組件使用外部對(duì)象的方法示例
最近在碰到有同學(xué)問(wèn)我，vue父組件怎么使用外部對(duì)象，具體例子如下：
有組件a：
<div @click="onClick">component a</div>
// componet a
...
methods: {
onClick(evt) {
// doSomething 這里只能拿到 mouseEvent
this.outsideClickHandler(evt); // 調(diào)用外部處理函數(shù)
}
}
...
有組件B，引用組件a，并傳入outsideClickHandler方法：
<v-componetA :outside-click-handler="onClick">componentB</v-componetA>
對(duì)以上這種封裝是組件庫(kù)中再常見不過(guò)的封裝了，實(shí)際使用中，有時(shí)候會(huì)需在component B傳入component A的outsideClickHandler方法中使用component B中的數(shù)據(jù)對(duì)象，而component的代碼又不能更改，這時(shí)候怎么辦呢？
其實(shí)解決方案也是非常簡(jiǎn)單，但是有時(shí)候我們會(huì)"執(zhí)迷不悟"。
廢話不說(shuō)，上代碼!
// componet b
...
data() {
a: {} // 數(shù)據(jù)
},
methods: {
onClick(evt) {
// 關(guān)鍵在于返回一個(gè)函數(shù)哦
return (evt) => {
// 這里也可以直接閉包使用
console.log(this.a);
}
}
}
...
總之,對(duì)于vue函數(shù)來(lái)說(shuō)，當(dāng)無(wú)法直接傳入?yún)?shù)的時(shí)候，可以考慮閉包實(shí)現(xiàn)，本文所說(shuō)的也只是一個(gè)簡(jiǎn)單例子，js的函數(shù)作為一等公民還有很多有趣的應(yīng)用。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- Vue項(xiàng)目中引入外部文件的方法（css、js、less）
- vue.js引入外部CSS樣式和外部JS文件的方法
- vue項(xiàng)目中在外部js文件中直接調(diào)用vue實(shí)例的方法比如說(shuō)this
- webpack+vue-cli項(xiàng)目中引入外部非模塊格式j(luò)s的方法
- vue項(xiàng)目中api接口管理總結(jié)
- 詳解vue項(xiàng)目中調(diào)用百度地圖API使用方法
- vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口示例
- 深入理解Vue官方文檔梳理之全局API
- 詳解Vue2 SSR 緩存 Api 數(shù)據(jù)
- Vue 2.x教程之基礎(chǔ)API
- vue 使用外部JS與調(diào)用原生API操作示例
相關(guān)文章
vue中el-cascader三級(jí)聯(lián)動(dòng)懶加載回顯問(wèn)題解決
本文主要介紹了vue中el-cascader三級(jí)聯(lián)動(dòng)懶加載回顯問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue-admin-element項(xiàng)目突然就起不來(lái)了的解決
這篇文章主要介紹了vue-admin-element項(xiàng)目突然就起不來(lái)了的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何溧陽(yáng)Vue實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02
element el-tooltip動(dòng)態(tài)顯示隱藏(有省略號(hào)顯示,沒有省略號(hào)不顯示)
本文主要介紹了element el-tooltip動(dòng)態(tài)顯示隱藏,主要實(shí)現(xiàn)有省略號(hào)顯示,沒有省略號(hào)不顯示,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
vue自動(dòng)路由-單頁(yè)面項(xiàng)目（非build時(shí)構(gòu)建）
這篇文章主要介紹了vue自動(dòng)路由-單頁(yè)面項(xiàng)目（非build時(shí)構(gòu)建）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue router 組件的高級(jí)應(yīng)用實(shí)例代碼
這篇文章主要介紹了vue-router 組件的高級(jí)應(yīng)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
基于Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件的示例代碼
如果你在社交媒體上停留的時(shí)間過(guò)長(zhǎng)，那么，你所在的網(wǎng)站很可能正在使用無(wú)限滾動(dòng)組件。這篇文章教你利用Vue3實(shí)現(xiàn)無(wú)限滾動(dòng)組件，感興趣的可以參考一下2022-09-09
這篇文章主要介紹了關(guān)于element-ui圖片上傳組件查看和限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
有不少的前端需求都需要使用到富文本編輯器,所以這篇文章主要來(lái)和大家介紹一下如何在Vue3項(xiàng)目中使用富文本編輯器,感興趣的可以了解下2024-04-04