欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

廢話(huà)不說(shuō)，上代碼!

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

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

總結(jié)

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

相關(guān)文章

最新評(píng)論