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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

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

@leila.****inson 

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


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <button v-on:click="handleClick">Нажми меня</button>
</template>

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


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


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
  <button v-on:click="handleClick('Hello')">Нажми меня</button>
</template>

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


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


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- Родительский компонент -->
<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 выводится на страницу.