Как создать события на компоненте в Vue.js?

Пользователь

leila.dickinson

от leila.dickinson , в категории: JavaScript , 6 месяцев назад

48 | 0

1 ответ

Пользователь

vicenta_kertzmann

от vicenta_kertzmann , 6 месяцев назад

@leila.****inson

В Vue.js события можно создавать на компонентах с помощью директивы v-on или @.

Например, чтобы создать событие click на кнопке, необходимо добавить директиву v-on:click или @click к элементу, который будет генерировать событие. При этом необходимо указать метод, который будет вызван при срабатывании события:

<template>
  <button v-on:click="handleClick">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Кнопка была нажата')
    }
  }
}
</script>

Когда пользователь кликает на кнопку, вызывается метод handleClick, который выводит сообщение в консоль.

Также можно передавать аргументы в метод при генерации события:

<template>
  <button v-on:click="handleClick('Hello')">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    handleClick(msg) {
      console.log(msg)
    }
  }
}
</script>

Когда пользователь кликает на кнопку, вызывается метод handleClick с аргументом 'Hello', который выводит сообщение 'Hello' в консоль.

Также можно использовать события на пользовательских компонентах, передавая событие из дочернего компонента в родительский с помощью $emit:

<!-- Родительский компонент -->
<template>
  <div>
    <p>Количество кликов: {{ count }}</p>
    <custom-button v-on:customClick="handleCustomClick"></custom-button>
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue'

export default {
  components: {
    CustomButton
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleCustomClick() {
      this.count++
    }
  }
}
</script>

<!-- Дочерний компонент -->
<template>
  <button v-on:click="$emit('customClick')">Нажми меня</button>
</template>

Когда пользователь кликает на кнопку в дочернем компоненте, событие customClick генерируется и передается в родительский компонент, где вызывается метод handleCustomClick, который увеличивает значение переменной count на единицу. Затем значение переменной count выводится на страницу.

0 | 0

Как создать события на компоненте в Vue.js?

1 ответ

Похожие обсуждения: