How can I capture a particular button click of external component?-CodePudding

I am importing an external component (Vue.js). This external component has multiple buttons. How can I capture a particular button click (firstButtonClick()) of this external component.

ExternalComponent:

 <button
           
   @click="firstButtonClick(firstButtonParam)"                
 >                   
</button>
 <button
           
   @click="secondButtonClick(secondButtonParam)"                
 >                   
</button>

MyComponent

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

CodePudding user response：

If I am thinking right, you need to emit some event in an external component on a button click and listen to it in my component and point that listener to the function you want to execute. The same could be done with the second button as well. Let me know in the comments if this is what you are looking for, if not, then please elaborate on your issue a little more.

In External Component

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

In My Component

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

CodePudding user response：

You can emit an event on button click event along with the data you want to pass.

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

In parent component :

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

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