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