如何捕獲外部組件的特定按鈕單擊？

Question

我正在導入一個外部組件（Vue.js）。 這個外部組件有多個按鈕。 如何捕獲此外部組件的特定按鈕單擊（ firstButtonClick() ）。

外部組件：

 <button
   class="first-button"        
   @click="firstButtonClick(firstButtonParam)"                
 >                   
</button>
 <button
   class="second-button"        
   @click="secondButtonClick(secondButtonParam)"                
 >                   
</button>

我的組件

    <ExternalComponent
      :prop1="prop1"
      :prop2="prop2"
      ...:
    />

Answer 1

如果我的想法正確，您需要在單擊按鈕時在外部組件中發出一些事件並在我的組件中收聽它，並將該偵聽器指向您要執行的 function。 第二個按鈕也可以這樣做。 如果這是您要查找的內容，請在評論中告訴我，如果不是，請再詳細說明您的問題。

在外部組件中

<button
   class="first-button"        
   @click="$emit('listen')"            
 >  

在我的組件中

 <ExternalComponent
      :prop1="prop1"
      :prop2="prop2"
      @listen="MethodYouWantToExecute"
 />

Answer 2

您可以在按鈕click事件上發出一個事件以及要傳遞的數據。

@click="$emit('firstButtonClick', data)"

在父組件中：

<ExternalComponent v-on:firstButtonClick="captureFirstButtonClick($event)"/>

captureFirstButtonClick(e) {
  console.log(e); // data coming from child
}