Пытаюсь передать действие по клику, но оно вызывается компонентом, в котором передавал?

Question

[alaskafx]

Хочу передать в компонент действие, которое будет происходить по клику на него, но когда я передаю это самое действие- тот компонент, в котором я передавал другому начинает сам вызывать это действие.

В моём случае - это $router.push('/auth')

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

Почему так происходит и как это исправить?

Comments

[Alex_mos]

А у дочернего компонента что написано?

[alaskafx]

Alex_mos,

<template >
    <button @mouseover="elementHover = true" @mouseleave="elementHover = false"><slot></slot></button>
</template>

data() {
    return {
      elementHover: false,
      active: false,
    }
  },

[alaskafx]

Alex_mos, * ещё даже никаких действий не написал у дочернего компонента с передаваемым clickMethod, а тот уже вызывает его

[Alex_mos]

alaskafx, вы передаёте в компонент но он ничего не получает.
Либо прописать вот так:

<MainButton @clickMethod=" $router.push('/auth')" >

Либо дочерний компонент должен эмитить событие родителю:

<button @click="$emit('clickMethod') @mouseover="elementHover = true" @mouseleave="elementHover = false"><slot></slot></button>

Если я не ошибаюсь

[alaskafx]

Alex_mos, Спасибо

Answer 1

[Aetae]

Не путай v-on:\@ и v-bind:\: - это разные вещи и они работают по-разному.
v-bind на вход получает выражение, т.е. по сути чистый js, и исполняет его, при:
:clickMethod=" $router.push('/auth')" в свойство clickMethod прилетит результат вызова $router.push('/auth').

При v-on на компонент вешается слушатель событий, т.е , при:
<MainButton @clickMethod=" $router.push('/auth')" условно(на самом деле там внутренняя система) происходит следующее:

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

Чтобы передать в clickMethod коллбэк, ты должен собственно передать туда заранее заданный в компоненте метод:

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

Но так делать ни в коем случае не надо. Так пишут в React и это очень криво. Надо использовать именно v-on:\@ и $emit, как посоветовал Alex_mos . Это гораздо более удобно и контролируемо. Ну и в принципе это vue-way: вниз props - вверх события.