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

其實(shí)解決方案也是非常簡單，但是有時(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è)簡單例子，js的函數(shù)作為一等公民還有很多有趣的應(yīng)用。

總結(jié)

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