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)文章
Vue3動態(tài)路由(響應(yīng)式帶參數(shù)的路由)變更頁面不刷新的問題解決辦法
問題來源是因為我的開源項目Maple-Boot項目的網(wǎng)站前端,因為項目主打的內(nèi)容發(fā)布展示,所以其中的內(nèi)容列表頁會根據(jù)不同的菜單進行渲染不同的路由,本文降介紹Vue3動態(tài)路由變更頁面不刷新的問題解決辦法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue實現(xiàn)直播間點贊飄心效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
iview table render集成switch開關(guān)的實例
下面小編就為大家分享一篇iview table render集成switch開關(guān)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue項目三級聯(lián)動路由跳轉(zhuǎn)與傳參的思路詳解
這篇文章主要介紹了Vue項目三級聯(lián)動的路由跳轉(zhuǎn)與傳參的思路詳解,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了Vue 的異常處理機制，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vuex中g(shù)etters的基本用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue切換div顯示隱藏,多選，單選代碼解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue 中slot 的具體用法,包括子組件父組件的代碼介紹，需要的朋友可以參考下2018-04-04