快捷導(dǎo)航

vue.js父組件使用外部對(duì)象的方法示例

更新時(shí)間：2017年04月25日 09:18:05 作者：zakwu

在我們?nèi)粘ｉ_發(fā)中經(jīng)常因?yàn)樗季S定式，我們會(huì)犯一些奇怪的錯(cuò)誤，有時(shí)候看似簡(jiǎn)單的問題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對(duì)象的方法，這個(gè)看似簡(jiǎn)單卻繞了一些彎路的問題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來看看吧。

最近在碰到有同學(xué)問我，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ù)中再常見不過的封裝了，實(shí)際使用中，有時(shí)候會(huì)需在component B傳入component A的outsideClickHandler方法中使用component B中的數(shù)據(jù)對(duì)象，而component的代碼又不能更改，這時(shí)候怎么辦呢？

其實(shí)解決方案也是非常簡(jiǎn)單，但是有時(shí)候我們會(huì)"執(zhí)迷不悟"。

廢話不說，上代碼!

// componet b
...
data() {
 a: {} // 數(shù)據(jù)
},
methods: {
 onClick(evt) {
  // 關(guān)鍵在于返回一個(gè)函數(shù)哦
  return (evt) => {
   // 這里也可以直接閉包使用
   console.log(this.a);
  }
 }
}
...

總之,對(duì)于vue函數(shù)來說，當(dāng)無法直接傳入?yún)?shù)的時(shí)候，可以考慮閉包實(shí)現(xiàn)，本文所說的也只是一個(gè)簡(jiǎn)單例子，js的函數(shù)作為一等公民還有很多有趣的應(yīng)用。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

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