怎么在vue.js父組件中調(diào)用外部對(duì)象

怎么在vue.js父組件中調(diào)用外部對(duì)象？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

有組件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í)迷不悟"。

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

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

看完上述內(nèi)容，你們掌握怎么在vue.js父組件中調(diào)用外部對(duì)象的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！