[Vuejs]-Is there any way that i can override the click event through Vue.js

by

0👍

✅

Trigger an event from your component, which can be listened from the parent component.

Let say in your DataTable component there is button which triggers a click :

 <button @click="$emit('triggerClick')">
     Hey trigger when someone clicks me
 </button>`

Now where you want to use DataTable component and want to execute a method when someone clicks the button which is inside DataTable

simply – 

<Your-Component>

  <DataTable @triggerClick="yourMethodFoo"/>

</Your-component>

In case you want to have method inside the component and can override that from parent. Then this is the optional behaviour you want- It’s like you want to create a which behaves globally.

You need to have an extra prop to tell your global component that you want method to be overridden by a parent method.

props: {
  parentHandler: {
    type: Boolean,
    default: false
  }
}

methods: {
  triggerClick() {
    if (this.parentHandler) {
      this.$emit(triggerClick)
       return
    }
    // execute anything bydefault

  }
}

<button @click="triggerClick">
   Hey trigger when someone clicks me
</button>`

So by default you will execute your default method but if you pass parentHandler= true to component it will execute the parent method

<Your-Component>
  <DataTable :parentHandler="true" @triggerClick="yourMethodFoo"/>
</Your-component>

Leave a comment