I'm trying to pass an action on click, but it is called by the component in which I passed it?

Question

Vue.js

I want to transfer an action to the component that will occur when it is clicked, but when I pass this very action, the component in which I passed it to another starts to call this action itself.

In my case, this is $router.push('/auth')

<MainButton :clickMethod=" $router.push('/auth')" >Создать аккаунт</MainButton>

Why is this happening and how to fix it?

Answer 1

Do not confuse v-on:\ @and v-bind:\ :- they are different things and they work differently. receives an expression
v-bind as input , i.e. essentially pure js, and executes it, when: the result of the call will arrive in the property . With v-on, an event listener is hung on the component, i.e., when: conditionally (in fact, there is an internal system), the following happens:
:clickMethod=" $router.push('/auth')"clickMethod$router.push('/auth')
<MainButton @clickMethod=" $router.push('/auth')"

MainButton.addEventListener('clickMethod', ($event) => {
    this.$router.push('/auth')
})

To pass to the clickMethodcallback, you must actually pass the method predefined in the component there:

<MainButton :clickMethod="clickMethod"
methods: {
  clickMethod() {
    this.$router.push('/auth')
  }
}

But in no case should you do this. This is how they write in React and it's very crooked. It is necessary to use exactly v-on:\ @and $emit, as advised by Alex_mos . It is much more convenient and controllable. Well, in principle, this is a vue-way: down props - up events.