[ВАЖНО - Читай описание] Урок 3/8. Передача данных между компонентами vue. Props и v-bind
HTML-код
- Опубликовано: 13 сен 2024
- ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
![[ВАЖНО - Читай описание] Урок 4/8. Axios. Получение данных из API и работа с VUEX Store](http://i.ytimg.com/vi/k1YGO3Julac/mqdefault.jpg)
![[ВАЖНО - Читай описание] Урок 4/8. Axios. Получение данных из API и работа с VUEX Store](/img/tr.png)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
Мужик, я не знаю, почему ты перестал записывать уроки, но все понятно и интересно, так что если ты это читаешь, то возобнови творчество, много, кому поможешь ещё)
обычно на этом уровне уже бесплатно не учат
Автору большое спасибо! Смотрю уроки, и наконец-то начинаю понимать как как с этим работать. И главное, манера изложения понятная, ни одного лишнего слова, всё кратко и по делу (по крайней мере до этого урока :)).
Дмитрий Немцов спасибо :)
Спасибо за уроки, нравится что еще объясняешь правила хорошего кода. Супер!
Первый раз пишу коммент на ютубе за 14 лет. Проходил платный курс по вью2, тип там объясняет более менее понятно, но после такого "понятно" приходится еще ютуб смотреть. Как тут объясняют, не объясняет ни один человек на ютубе. Разжевывается все так, что самый тупой валенок запишет на вью. Спасибо большое за труд, не забрасывайте канал!
Пусть будет один комментарий от девушки:). Очень здорово объясняете, сразу же применяю все на своем проекте. Спасибо большое за качественный обучающий контент.
Alena Golubeva рад стараться:)
Пока лучший объяснятор на моей памяти!:)
Автору респект, за подробное объяснение. Народ лайков зажал хотя просмотров намного больше, а лайки помогают в продвижении, такой контент сильно помогает в освоении нового.
"Братан, мне нужен ключ, уникальный! Иначе все, работать не буду, увольняюсь и идите нафиг!" ))))))))))))))))))))))))))))) Гениальные уроки!
Народ, пишу из лета 21 года, кто сейчас смотрит сей чудесный курс и у кого не работает scss - понижайте версию npm i sass-loader@10 Автору респект! Жаль перестал записывать, но понять можно, ЮТ дело не прибыльное)
Со всего интернета, все, что мне удавалось найти, Автор лучший! Каждый шаг подробно рассказывает, повторяет, что все постепенно укладывается по полочкам в голове, без лишней воды, спасибо Вам огромное. Без ваших видео я уже начал отчаиваться))
Прекрасно объясняете, вам пора открывать собственные курсы - информация на вес золота!
у кого не работает scss попробуйте сделать так мне помогло
1. npm install sass-loader node-sass --save-dev
2. поменять prependData на additionalData
3. перезапустить сервер npm run serve
Спасибо большое!)
Выдавал ошибку : padding: $padding*2;
│ ^^^^^^^^
Помогло следующее:
В скрипте v-catalog-item в в самом начале нужно прописать:
@import './src/assets/styles/variables.scss';
Спасибо за данные уроки автору)
Лайк за «прекрасное, увлекательное редактирование»
Спасибо за урок, все толково и понятно!
Mihanik Richer рад стараться:)
Спасибо огромное Go Frontend за Ваш труд
Автору огромное спасибо за труд и детальнное объяснение! Таких видео (и уроков) катастрофически не хватает на руссигменте.
Отличная подача материала, все без воды и четко по полкам, спасибо
заслуженный лайк, отдельное спасибо за DB.json. Никаких сложных MySQL, Firebase и прочего.
Все просто, лаконично, и не понятно, надо смотреть еще раз урок)))
И от автора " не понятно" не зависит, все рассказано четко.
Ты токмо не забывай что в реальной практике тебе придется работать именно со "сложными" MySQL и Firebase ))) А это уже отдельное API (я про Firebase)
@@АлМ-ы8ъ само собой, только Фаербейс у других Ютуб-блогеров есть, а джисон-только тут. Это очень хорошее решение
@@sateevtima7914 ну и привыкай к рогатке, как в "армию" пойдешь, то потом не пизди что тебя из железяк стрелять заставляют )
@@АлМ-ы8ъ :) так Фаербэйс-то у других авторов посмотреть можно))))))))
Привет! Спасибо за внятные курсы
Много чего смотрел, столкнулся с проблемой и твое объяснение помогло. Спасибо.
Чувак у тебя талант хорошо объяснять сложные вещи!
Очень грамотно объясняешь! Спасибо!
Отличная манера изложения6 как раз для тех кто только начинает разбираться! Спасибо
у Вас очень классно получается учить. Очень чётко и ясно.
Спасибо, все ясно и понятно, без лишней воды !
Братан ты знаешь что ты супер!? Очень полезное по vue что я нашел на youtube👍👍👍👍
Это просто божественно, все никак не мог понять эти props... Доходчиво, прям как для детей!!! Спасибыч
очень классные уроки, автор реально помог.
спасибо за разжевывание по несколько раз, так намного проще понять . редко кто так делает
Благодарю за понятные уроки! Все супер!
Под дикцию уснуть можно, НО все доступно и понятно. Даже программистом быть не надо, чтобы понять.
Бальшое спасибо, например! Очень полезно оказалось для меня
Спасибо за уроки!!!!!!!!!!!!
хорошие видосы - сжато и по сути!
Вадим Воренас Спасибо:)
👍
Гуд !))) корректней наверное элемент потомок или дочерний элемент
Прекрасно и харизматично
Огромнейшее спасибо!
Все очень понятно.
А как передать данные в соседний компонент (не к родителю, не к ребенку а к БРАТУ) ????
Достойный курс
Спасибо большое за урок! Смотреть одно удовольствие)
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
не видит переменные указанные в v-catalogue-item.vue (SassError: Undefined variable: "$padding".)
padding: $padding;
margin: $margin;
Притом variables.scss подключился (проверил: стили из него работают)
Пока решил так:
в v-catalogue-item.vue в стилях прописал
@import "../assets/styles/variables.scss";
Почему без import'a не работают переменные?
Jeqtos значит не подключлись глобально. Проверьте чтобы во vue.config.js и main.js все было как в уроке
@@gofrontend2220 vue.config.js в папке src был, перенс в корень все работает. спасибо :-)
@@jeqtos9643 you saved my millions of nerves. Thank you :)
Используя версию Vue 3 столкнулся с проблемой переменных. Помогло когда изменил свойство в vue.config.js:
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: '@import "@/assets/styles/styles.scss";'
}
}
}
}
Мне твои уроки очень помогли, лучше многих платных курсов, спасибо. Почему забросил канал?
Отличное видео!!
Почему возникает error Mixed spaces and tabs no-mixed-spaces-and-tabs? В eslintrc прописал "no-mixed-spaces-and-tabs": 0, но с каждым сохранением v-catalog эта ошибка возникает снова
29:20 В vscode можно в emmit'ере настроить автовыравнивание, чтобы новый аттрибут на новой строке показывался. В других ide не знаю, но если что для vscode могу файл с настройками скинуть кому удобно.
скинь плз
почему то финт с require не срабатывает(
в конфигурации точно ничего менять не нужно?
супер!
Все понятно, правда пришлось повозиться с sass, мне в итоге помогло следющее:
1. скачал с гитхаба package.json и запустил npm install (видимо когда сам ставил, то версии брались последние рассчитанные на vue3, которые выдавали ошибки при работе с vue2)
2. заменил во vue.config.js на additionalData и variable.scss (как советовали в комментариях)
Огромное спасибо! Уже неделю мучаюсь с этим. Делал все без props, поэтому не мог найти решения, как все это дело немного отделить от vuex, точнее работать точечно с product.
Дошел до третьего урока и возвращаюсь на первый, чтобы все повторить руками ))) Спасибо за объяснение, все почти понятно и логично))) Единственно возник более теоретичный вопрос по организации файлов. Когда верстаешь статичный файл (собираешь gulp, подключаешь Sass, mixins, variables), то организуешь файлы также "компонентно" выделяешь header, footer, отдельно шрифты, кнопки итд. так удобно работать с многостраничником. А у вас я вижу что в каждом компоненте свои правила CSS, т.е. они не выделены в отдельные файлы? Применительно к магазину, где 1000 карточек, на практике, правила CSS также вносятся в каждую из них? или все же импортируются?
Kirill Kononov ну вы же не будете кажду карточку руками кодить:) компонент карточки товара один. И стили в нем одном прописаны. А рендерится он столько, сколько товаров в базе.
Привет ребятки. Вот вчера а это пол года спустя того, как появилось данное видео и моя Vue CLI версия уже не 3+, а Vue CLI 4.+. Я столкнулся с проблемой, что Sass не видит переменных и выдавал мне ошибку: SassError: Undefined variable.
╷
7 │ padding: $padding*2;
│ ^^^^^^^^
На англоязычных форумах я ничего не нашел, но на одном немецком сайте какая-то девушка написала, что для коректной работы с scss, sass нужно конкретно указывать путь к переменным в скрипте где вы хотите использовать scss.
Так на примере скрипта v-catalog-item в в самом начале нужно поставить--> @import './src/assets/styles/variables.scss';
Это наверняка кому-то поможет тем более все больше народу переходит на CLI 4 😌😉
@@denden8764 Решил проблему? Тут в комментах повыше решение
vue.config.js в папке src скорее всего, надо перенести в корень
Привет! А подскажи, пожалуйста, какая IDE у тебя используется в видео и как поставить такую тему?)
Всем привет. автору огромнейший респект за уроки. и у меня есть вопрос. всё отлично работало, пока я не решил на третьем уроке установить sass-loader и node-sass. при введении записи npm install sass-loader, я получаю ошибку Failed to resolve loader: sass-loader. тое сть я не могу установить sass-loader. это единственная ошибка. можете помочь разобраться?
Такой вопрос, не однократно слышал что для общения между комп. лучше использовать "Vuex", что скажете на этот счет? Или нет смысла применять его к столь малым задачам?
уроки просто супер
А как поднять данные из дочернего компонента в главный через ещё один промежуточный компонент?
Здравствуйте! Написала вам в телеграмме по поводу своей проблемы. Не могли бы вы посмотреть?
Не знаю как в вашей IDE, я себе в шторме сделал снипет 'fo' + tab --> v-for="(el, i) in data" :key="i" (сниппет работает только в template в tag-e).
у кого проблема с глобальным подключением файлов sass/scss, просто импортируйте в style компонента и все остальные его подключение удалите из конфига и майна
@import 'src/assets/style/style.scss';
Спасибо большое за решение. Единственное, мне кажется, импортировать в каждом компоненте не совсем выход. Вам случайно не удалось найти другое решение?
Не подключаются стили и скрипты из билда.
Ни в локалке, ни на сервере.
И там и там ищет путь к этим файлам от корня домена, а не от папки с приложением :(
Александр Иванов вы про настройки vue.config для scss?
Александр Иванов добавляйтесь в телеграм @aboltnev. Щас починим:)
Александр Иванов возможно у вас public path указан таким образом, что система считает что надо идти от корня домена
Мне бы ваш код увидеть ) Так на словах не разберусь
@@gofrontend2220 вроде как vue.config.js должен лежать в корне проекта, а не в папке src :)
Отличный урок
Почему переменная scss в компоненте vue - undefined?
я одного не могу понять...почему если я пишу в дочернем компоненте this.$emit('sendDataArticle', this.product_data.article) при сборке ошибка, все ломается, но если оставить просто this.$emit('send', this.product_data.article) тогда все работает нормально...
Александра Рудивицкая значит в родителе не так принимаете название события. Как ребенок называет событие так и родитель должен его принять. Чттайте внимательнее ошибку
Если еще актуально $emit не любит верхний регистр, по этому ругается вот статья eslint.vuejs.org/rules/custom-event-name-casing.html
Добрый день! Почему-то не применились стили: Карточки без обрамлений расположены вертикально в одну колонку по центру. Не подскажете, в чём может быть дело?
Владимир Бабаясин стили где лежат? И как вы к ним стучитесь?
@@gofrontend2220 Стили лежат как и на видео, то есть в файлах, в тегах . В файлах: styles.scss, variables.scss и vue.config.js всё как у Вас на видео и в репозитории. В файле main.js импорт сделан: import './assets/styles/styles.scss'. Может ещё что-то надо где-то прописать? Я в sass новичок.
Владимир Бабаясин пишите мне в телеграм @aboltnev решим
а где ссылка на репозиторий?
У меня не появляется файл db.json
создай руками
У меня не был установлен sass-loader, может кому пригодиться, в терминале пишем
npm install -D sass-loader node-sass
Спасибо :( , теперь ругается на собачку перед import: SassError: File to import not found or unreadable: @assets/styles/styles.scss.
on line 1 of D:\js-edu\Vue_edu\online_shop\src\assets\styles\styles.scss
>> @import "@/assets/styles/styles.scss";
^
Вылечил : снес всё сначала: npm uninstall -D sass-loader node-sass После этого установил sass-loader командой: npm install sass-loader node-sass webpack --save-dev. Теперь всё снова работает :)
@@user-jp1yu2iu2r отлично 👍.
Я так понимаю всё что касается статичных файлов, надо указывать через require?
Шахром Мукумов да. Я к сожалению не нашел толкового объяснения такому поведению, но это не vue, а webpack так себя ведет:)
@@gofrontend2220 понял, спасибо. И еще, в 4 уроке у меня почему-то выдает ошибку, пишет Cannot read property 'getters' of undefined". В DevTools пишет что VUEX не обнаружен. Пока не понял что нет, сейчас буду пересматривать урок, возможно где-то что-то пропустил. Спасибо за уроки!
Шахром Мукумов vuex правильно подключили? В main.js его надо не забыть импортировать. Если закопаетесь - пишите в телеграм @aboltnev, разберемся:)
@@gofrontend2220 Всё, нашел, забыл "store" импортировать в main.js, спасибо!
Шахром Мукумов 👍
не нашел ответа на мучующий меня вопрос.
я новичёк, так что прошу простить если слишком простой вопрос для многих.
Есть Vuex. Можно ведь через его state передавать параметры между компонентами! Так? Зачем тогда все эти заморочки с пропсми?
Есть, и вроде в следующем видео о нем расскажут, но знать как работают пропсы надо.
Спасибо!
Подскажите, пожалуйста, как в момент получения из дочернего компонента данных в массив положить {id, value}, где id -это key идентификатор дочернего элеиента, а value -полученное значение из дочернего элеиента?
Дмитрий в момент поднятия события из дочки через emit, передайте туда эти id и value this.$emit(“event”, id, value). В родителе свяжите дочкин евент с родительским методом: @event=“parentMethod”. А в самом методе приниайте и используйте их: parentMethod(id, value) {}
Дмитрий если вы из дочки передаете данные, они автоматом принимаются аргументом в родительском методе
@@gofrontend2220 в целом звучит прекрасно! а как из ребенка передать id, если оно назначается в родителе?
т.е. в родителе генерируется несколько компонентов.
вся задача в том, что в ребенке есть вичисляемое поле.
а в родителе нужно посчитать сумму этих вычисляемых полей всех детей.
не понимаю как это сделать, подскажите, пжл, как бы Вы сделали?
Дмитрий короче пишите в телегу - разберемся:) @aboltnev
failed to resolve loader: sass-loader vue
НЕ ЛЕЧИТСЯ!
как компонент понял что прилетело именно product_data
в плане, родитель же мог отправить вообще любой объект? как ребенок понял,что прилетел именно объект продукт?
Sekiro Genshiro в ребенке есть props с определенным названием. Родитель в этот конкретный пропс передает конкретные данные
@@gofrontend2220 так как он это сделал то?) в пропс все что угодно написать можно же.как он прицепился к нужному объекту?
Sekiro Genshiro всмысе как? Родитель говорит :childProp=“myCurrentData”. То есть ребенок, который ждет данные в пропс childProp получит данные myCurrentData.что родитель передает, то ребенок и получает. Как это называется в родителе - пофиг, лишь бы оно передалось в пропсу дитя. Имя пропса должно быть таким, как ребенок ее у себя назвал, а имя передаваемой пропсы - не важно
подскажите почему у меня event зачеркнут и ошибку выдает 'event' is deprecated.Vetur(6385)
Parsing error: Unexpected token, expected ","
А зачем вы ветур еще установили?
@@ПЕНАБЛОГ я не знаю блин я просто хотел с тейлвиндом верстку делать и совместить с вью это может дать такую ошибку ?
scss не работает!!! Поэтому приходится использовать просто css
При добавлении image фото програжаются но ошибка в консоле
[Vue warn]: Error in render: "Error: Cannot find module './undefined'"
found in
---> at src/components/v-catalog-item.vue
at src/components/v-catalog.vue
at src/components/v-main-wrapper.vue
at src/App.vue
Error: Cannot find module './undefined'
webpackContextResolve .*$:17
webpackContext .*$:12
render v-catalog-item.vue:9
VueJS 52
main.js:6
js app.js:1462
__webpack_require__ app.js:849
fn app.js:151
1 app.js:1475
__webpack_require__ app.js:849
checkDeferredModules app.js:46
app.js:925
app.js:928
v
Хотя тут все правильно :src="require('../assets/images/' + product_data.image) "
Если путь убрать соответственно фото не прогружаются
В чем дело может быть?
такая же проблема, нашел ответ?)
@@Behemoth-i2w проверь данные файла img и сам файл который подключаешь, возможно не корректно название, расширение или вовсе отсутствует.
настройки модуль экспортс не работают
a vue.config.js мы сами создаем ? у меня его нету при сборки
Мубориз Мирзоев да сами
@@gofrontend2220 понравилось, что вы каждую мелочь объясняете. Подписался, буду ждать новых видео.
./src/components/catalog_item.vue
Module Error (from ./node_modules/eslint-loader/index.js):
D:\learning\vuejs\project1\online_shop\src\components\catalog_item.vue
27:23 error Parsing error: The type cast expression is expected to be wrapped with parenthesis
17 | methods: {
18 | sendDataToParent() {
> 19 | this.$emit( event:'sendArticle', this.product_data.article)
| ^
20 | }
21 | }
22 | }
Выдает такую ошибку можете пжл помочь
event убрать this.$emit( 'sendArticle', this.product_data.article)
блин ну как по мне так не надо было сюда scss пихать в видео
не верно) лучше пусть с ним, уже на css не пишут) переходи быстрее, тем более scss легко перейти. в идеале переходи на sass.
+
а зачем отправлять что то родителю, если можно в ребенке просто законсолить методом его артикл, родитель же его знает
Sekiro Genshiro дальше смотрите и узнаете:)
А если у одного изображения допустим разрешение пнг, тогда что делать?
Ребята, у кого такая же проблема как у меня?:
Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] C:\Users\Admin\Desktop\shop-project\src\main.js: C:\Users\Admin\Desktop\shop-project contains both .browserslistrc and package.json with browsers (While processing: "C:\\Users\\Admin\\Desktop\\shop-project\
ode_modules\\@vue\\cli-plugin-babel\\preset.js")
Алексей ошибку переведите и все понятно станет
@@gofrontend2220 исправьте пожалуйста. Два дня уже не могу справиться с ошибкой
Алексей что исправить? У меня все работает
А почему for если for-in?
Take A Cutter не очень понял. Вы про конструкцию for of/in?
@@gofrontend2220 я имею ввиду, что v-for - это все-таки синтаксически ближе к циклу в нативном js for-in, с той лишь разницой что фонином не рекомендуется перебирать массив, как кстати вью т.е через что реализовала надо залезть глянуть.
@@gofrontend2220 в svelte тоже самое но реализовано через each -> что является смесью как я понял форина и форича
Take A Cutter реализовано я думаю стандартно под копотом: вью смотрит на коллекцию по которой мы проходимся и выполняет цикл. Как? Думаю они понимают работы циклов и применяют наиболее быстрый. Например до 100 элементов самый быстрый это for(item of items), далее forEach
5:35 обьекты и массивы это разные вещи...
john bilokon оговорился, пардон
vue, vuex, shop
а где файл index.html ничего не работает по этому примеру и где что смотреть вообще не ясно зачем столько ставить всякой чуши, когда непонятно откуда что берется и почему не работает. Не пример а полная катастрофа. Был бы хоть один пример как подключить компонент чтобы он работал
НЕ АКТУАЛЬНЫЙ УРОК 👎
Да, по пиз*е пошел данный ролик, а вся дичь со 2 ролика начинается, зря время потратил.
@@user-bj3ow4fe9m Актуальный, просто у тебя другая версия, есть небольшие изменения
Что не так? У меня всё работает
если что в this.$emit переде первым аргументом больше не надо писать event
со стилями ошибка:
SassError: semicolons aren't allowed in the indented syntax.
╷
1 │ @import "@/assets/styles/styles.sass";
│ ^
почитайте комментарии выше там описали как должен выглядеть vue.config теперь
👍