Ошибка события: TypeError: невозможно прочитать свойства неопределенного значения (чтение «stopPropagation»)
Я не могу использовать модификаторы щелчка при передаче события щелчка из дочернего компонента в родительский компонент. Кто-нибудь знает, что я могу здесь делать неправильно?
У меня есть такой компонент:
<!-- ButtonComponent -->
<template>
<button @click = "$emit('click')">Click Me</button>
</template>
<script setup>
</script>
И я использую это так:
<template>
<ButtonComponent @click = "doSomething()" />
</template>
Однако когда я пытаюсь применить модификатор stop:
<ButtonComponent @click.stop = "doSomething()" />
Я получаю следующую ошибку:
[Предупреждение Vue]: ошибка в обработчике v-on: «TypeError: невозможно прочитать свойства неопределенного значения (чтение 'stopPropagation')»
Бонус: я бы предпочел не генерировать события из дочернего компонента вручную. Вместо этого я бы предпочел, чтобы дочерний компонент пересылал все события родительскому компоненту.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
- Обработчик кликов назначается корневому элементу из-за резервных атрибутов, поэтому;
<button>Click Me</button>
- Ошибка возникает потому, что модификатор
.stopфактически назначает дополнительный обработчик, который ожидает объект с методомstopPropagation, передайте специальную переменную$event, которая будет обрабатываться этим дополнительным обработчиком:
<button @click = "$emit('click', $event)">Click Me</button>
- Однако использование явного
$eventполезно для многокорневых компонентов:
<script setup>
const $emit=defineEmits(['click']);
</script>
<template>
<button @click = "$emit('click', $event)">Click Me</button>
<div>I'm a multiroot component</div>
</template>
@kissu добавил объяснение
@kissu добавил пример, где нужен $event
Хм, у меня никогда не было этой ошибки, потому что она в основном была неявной и работала хорошо. Но я предполагаю, что с Vue3 кое-что изменилось и теперь необходимо явно объявлять $event. Это можно считать ошибкой, потому что я не вижу никакой пользы в том, чтобы делать это явным образом.
@kissu, это не ошибка, вы пересылаете событие без объекта события. ошибка с вашей стороны 🤷♂️
Я не понимаю, почему сахарный синтаксис Vue неявно пересылает пользовательский вывод из компонента, а не из HTML-элемента. Я имею в виду, что такая ситуация в любом случае случалась бы нечасто, но я не вижу смысла в сбое здесь, вместо того, чтобы быть достаточно умным и пересылать неявное $event. Возможно, однажды я спрошу об этом в основном репозитории.
@kissu я не понимаю, почему Vue должен неявно добавлять дополнительный параметр для вызова, который написан явно.
Потому что он уже делает это в основном для других случаев? В любом случае. И я не ОП + вы не должны просить ОП принять или что-то в этом роде (очевидно, оказывает давление на людей).
@kissu извини, принял тебя за ОП...
Спасибо! Я так рад, что это было простое решение.
Было 2 голоса, я проголосовал против, и там все равно было 2 голоса. Я тоже не могу снова нажать "Проголосовать" :shrug:
Да, а почему ошибка?