#28 Попап и scoped slots - Vue.js: практика
ฝัง
- เผยแพร่เมื่อ 14 พ.ย. 2024
- Присоединяйтесь к нашему сообществу в Телеграм - t.me/vuejs_club
Код из видео: codesandbox.io...
---
Видео создано благодаря подписчикам проекта на нашем Patreon.
Хотите получать контент на 3 месяца раньше остальных? Присоединяйтесь! / javascriptninja
Илья: ивенты наверх, пропсы вниз, функции через пропсы не передаём.
Слоты: подержите моё пиво
Спасибо за ваш труд! На мой взгляд в учебных курсах не хватает именно такой информации, связанной с архитектурой приложения, базовым пониманием работы фреймворков и грамотными практическими занятиями.
Это видео просто открыло мне совсем другой вид на слоты! С каждым вашим видео понимаю что я очень много писал плохого кода, в том числе применял vuex как вы и подметили для таких решений. Спасибо!
очень четко разжевано...спасибо вам и вашей команде за вклад в развитие качественного кодинга.
Спасибо! Звук - топ!
Еще давно увидел такую же логику во вьютифае.
Можно сказать вьютифай мне открыл глаза на качественное апи компонентов)
Отлично! Спасибо большое, очень полезное видео
Спасибо за труд. Решение было очевидное, ибо реакт подходы все меня никак не покидают :)
Хороший урок. Резюме можно даже записать, чтобы не забыть.
Спасибо за труд. Было полезно!
Спасибо большое за уроки. А будут ли продолжения? В частности интересует проект кинотеатр который если всё правильно помню мы должны были кодить с помощью вашего бэкэнда.
Круто, спасибо 🙂
Подскажите пожалуйста, почему может быть такое, что я передаю метод в слот, а он undefined, а переменные работают
Очень нужно помогите
не реактивные данные обязательно складывать в options, а не в data? Это насчет текста confirmation
Спасибо!
Такой вопрос, а где разбор домашних заданий по криптономикону?)))))
Спасибо за видео!
Если используешь key modifiers (а-ля :keyup.esc="close") вместо добавления листенера, то под капотом у вью это всё тот же эвент листенер, только не нужно удалять его перед дестроем компонента? Кажется, что так проще писать, но может есть какие-то нюансы :)
Да, но здесь мы не можем этого делать - мы ж на document вешаемся
@@JavaScriptNinja а компонент и не должен трогать document, разве нет?
Звук стал значительно приятнее в сравнении с прошлыми видео. Апдейт оборудования? Что используешь для записи?
Спасибо за видео.
Бывает когда popup вылезает с боку, например настройки, вводишь в его поля много информации, а потом случайно кликаешь мимо, например когда хотел выделить текст для замены, из а этого окно закрывается, и все заполненное удаляется.
Края формы надо стараться делать по больше.
Можно ли в Slots Передать компонент с кнопками?
Если да, то как поймать события ?
Вопрос по поводу передачи функции. Как будет правильнее..
Таким же способом, можно передать ф-цию в дочерний компонент, допустим дано:
В родительском компоненте массив c объектами - toDoList - и функция - deleteItem, которая, допустим, принимает ID эл-та и удаляет один итем из массива toDolist. Есть дочерний компонент toDoItem и внутри кнопка УДАЛИТЬ. Допустим, нам нужно удалить эл-т. Отсюда вопрос, какой подход будет правильнее -- по нажатию на кнопку 'удалить' в дочернем компоненте, вызывать emit, а после в родительском подписываться на событие и уже запускать функцию deleteItem ИЛИ же передать функцию deleteItem в дочерний и по клику на кнопку 'удалить' вызывать напрямую эту самую функцию?
Передавать функции во вью неверно. Правильно использовать события
@@JavaScriptNinja Благодарю за ответ
захотелось поотбивать себе руки за то, что использовал в такой ситуации refs
Ну если кнопка будет межами Компонентом Popup, а как мне тогда достать функцию с Popup?) Например был такой случай, что когда нажимаю на кнопку редагувать(кнопка в родителя) то метод должен выполниться в компоненти ребенка, метод такой там( записывает даные в v-model компонента ребенка)
ошибка: this.close() is not a function
1.Чому одразу не повісити stop - @click.stop="close()" ?
2.Чому подію не задати через модифікатор - @keydown.esc="this.close()" ?
Не понимаю, чуть ли не в каждом видео автор говорит о том что во вью используется компонентный подход и не следует передавать компонентам функции(методы) через пропсы, используйте события (эмиты) и ловите их, а тут так легко эту концепцию игнорирует.
Без негатива, видео очень полезные и тд, но ни у кого не возникает вопросов о корректности данного подхода и его противоречивости относительно общей концепции?
P.s сам пишу на реакте и ничего против передачи функций через пропсы не имею)
Спасибо за видео. Но есть один вопрос, кто может помочь?
на 08:30 в mounted мы имеем такую прослушку ：
document.addEventListener("keydown", (e) => {
if (this.isOpen && e.key === "Escape") {
this.close();
}
});
но почему если сделать так, то не срабатывает:
document.addEventListener("keydown", function (e) {
if (this.isOpen && e.key === "Escape") {
this.close();
}
});
Как я понимаю, что всему виной this.
Подскажите, если не сложно. Ну, или скиньте ссылку, чтобы я смог почитать. Заранее благодарен!
Есть разные типы функций, если в кратце то: функция с словом function () { // } создаёт свой контекст, т.е. свой this. Стрелочная же ссылается на контекст родителя, т.е. компонента. Почитай про контекст в общем, в случае с ключевым словом function нам пришлось бы делать байнд контекста
@@ВладДунаев-э2ъ причем тут контекст... нет ссылки на лямбду вот поэтому и не получится удалить