vue.js父組件使用外部對象的方法示例
更新時間：2017年04月25日 09:18:05 作者：zakwu
在我們日常開發(fā)中經常因為思維定式，我們會犯一些奇怪的錯誤，有時候看似簡單的問題卻給出了復雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對象的方法，這個看似簡單卻繞了一些彎路的問題，有必要和大家分享下，需要的朋友可以參考學習，下面來看看吧。
最近在碰到有同學問我，vue父組件怎么使用外部對象，具體例子如下：
有組件a：
<div @click="onClick">component a</div>
// componet a
...
methods: {
onClick(evt) {
// doSomething 這里只能拿到 mouseEvent
this.outsideClickHandler(evt); // 調用外部處理函數(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) {
// 關鍵在于返回一個函數(shù)哦
return (evt) => {
// 這里也可以直接閉包使用
console.log(this.a);
}
}
}
...
總之,對于vue函數(shù)來說，當無法直接傳入?yún)?shù)的時候，可以考慮閉包實現(xiàn)，本文所說的也只是一個簡單例子，js的函數(shù)作為一等公民還有很多有趣的應用。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
Vue3動態(tài)路由(響應式帶參數(shù)的路由)變更頁面不刷新的問題解決辦法
問題來源是因為我的開源項目Maple-Boot項目的網(wǎng)站前端,因為項目主打的內容發(fā)布展示,所以其中的內容列表頁會根據(jù)不同的菜單進行渲染不同的路由,本文降介紹Vue3動態(tài)路由變更頁面不刷新的問題解決辦法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue實現(xiàn)直播間點贊飄心效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
iview table render集成switch開關的實例
下面小編就為大家分享一篇iview table render集成switch開關的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue項目三級聯(lián)動的路由跳轉與傳參的思路詳解,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了Vue 的異常處理機制，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vuex中getters的基本用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue切換div顯示隱藏,多選，單選代碼解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue 中slot 的具體用法,包括子組件父組件的代碼介紹，需要的朋友可以參考下2018-04-04