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