5 Easy Ways To Pass Info To Vue Components!
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- Vue.js is really easy to pass information to components. There is props, inject/provide, Vuex and more! In this video I discuss the various ways you can use to level up your Vue.js skills with components!
Check now if your .TECH is available! Link - go.tech/erik
Use Code erik.tech at Checkout for a special 80% OFF on 1 & 5 Year .TECH Domains!
0:00 - Intro
2:26 - Overview of project
5:10 - Props
7:50 - Inject/Provide
13:05 - this.$refs
16:28 - Vue.prototype
18:28 - Bonus (click here to find out what it is!)
20:10 - Vuex
📚 Sign up and get notified about my new Vue 3 course! - bit.ly/2vFWBQi
👉Check out my last video on Express and serverless!
• LEARN HOW TO CREATE A ...
📚 Sign up here to get the first chapter of my book (Vue.js in Action) and a cheatsheet - bit.ly/2GWWuEw
♡ ♡ ♡
MY COURSES -
→ VUE.JS + NUXT.JS (Two Courses In One) - bit.ly/2LalQka
♡ ♡ ♡
Make Sure To Check These Courses Out On Udemy! 💻
→ JAVASCRIPT ALGORITHMS COLT STEELE'S COURSE - bit.ly/2L8HSPV
→ THE WEB DEVELOPER BOOTCAMP (GREAT FOR BEGINNERS) - bit.ly/2zP4alw
→ THE ADVANCED WEB DEVELOPER BOOTCAMP - bit.ly/2h53MYg
→ THE ULTIMATE VUE JS 2 COURSE - bit.ly/2CTvsvx
→ CHECK OUT THIS COURSE - Angular 8 - The Complete Guide - bit.ly/2sCMxWm
→ Check out the 100 Front End Interview Question Challenge here - bit.ly/2NM9GAm
→ The Complete 2019 Web Development Bootcamp - Angela Yu - bit.ly/2ADKEKD
👉 Algo expert is the best way to learn algorithms! Check out my code and get 15% off at checkout with code "erik" algoexpert.io/erik
___
Links (and code)
github.com/ErikCH/VueComponen...
MY WEBSITE - www.programwitherik.com
MY TWITTER - / erikch
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
Excellent tutorial buddy! Really enjoyed this
Yes, my mind was blown while watching the video! Thank you so much! :)
Inject method looks really useful. Thanks!
more of this Erik. this is very helpful! developer from Philippines.
Hi Erik !
I am new in Vue js, and your tutorial is very helpful !
Thanks
Glad it helped
With "vuex " I faced two problems : 1. Mutating state property directly and 2. while refreshing the page "vuex" state backs to its initial state. It will be great if you clear those concepts or show best practices.
Thanks for the overview Erik, I kinda wish there weren't so many ways, so that it is easier to follow convention
Yeah, you are right. Just pick the easiest way for you
thx very informative video
such a great video. thank you erik .please make a video about how we can use vue with express and mongodb. i know it is very easy to use firebase for database with vue but mongo with vue is a little bit confusing for begginers like me. thank you in advance
OK!
What about the event bus (emit)?
Nuxt: What if the parent component is the default.vue from the layouts folder, would you still be able to send data from the default.vue to your components from either the page's folder or component's folder?
This is the best formula of passing data in different ways.
hey tutorial was great but i have a api data and using it in a vue page ok and now i passing a part of it to vomponent and it work nicely but when i refreshing the page it wont send the data again can you guide me to make it to pass data even after page refreshing please?
Vuex may appear a bit cumbersome in some situtations.
Event bus also may be a nice way to pass data across different components (with or without relations).
blokche_dev that’s another good one !
I couldn't agree more, just check this out: austincooper.dev/2019/08/09/vue-observable-state-store/
$parent is golden. I've built a ton of Vue apps and never knew about that one.
Hi, thanks for video. But example with Vue.prototype don't work for me. In conole.log i have a vue is function and "Vue is a constructor and should be called with the `new` keyword". Can you help me, what could be the error ?
Hi Erik, I have a Nuxt-Vuetify app which only has the default and index layouts. I'm trying $refs method to make changes on default.vue. If I add a {{ message }} on default's toolbar (v-app-bar and v-toolbar-tile) and change it from index.vue works perfect but didn't work on default's footer (v-footer v-row v-col), can you help me out? By the way, I really learn from your videos, you have high level of knowledge and know how to explain. Thanks.
Could you make some videos about Vuex persistent Data and Cookies?
To favs. Thanks
IT'S DOPE
PARRENT => provide() {return { myText: this.otherProps}}
Child => inject['myText']
Kostia Bazrov-WORK thats a good one , I was going to show how you can make an observable object using Vues observable , but I ran out of time. That could work to with inject
use cases of using refs and prototype?
do you have the git project where you have NOT made these changes already? I want to follow along the video but git project already has the changes so it makes no sense.
props + this.$parent is the fastest one for direct child / father exchange
Right, but "this.$parent" is considered a bad practice, I think. Plus you're technically not "passing" the data, instead you're reaching out for the parent and getting that data.
anyone knows how to pass data between two components that aren't related. Thanks
Then you'll need to use something like vuex
@@ProgramWithErik Yeah thank you, i also found out i could use something called 'Bus event' it did pretty good job
How about Fire.$emit 😁, but thanks for this videos, excelent!
Yes! I didn't mention that but yes
i tried for hours to make Vue.prototype work and it doesn't...it baffles me that in this tutorial it works...and I don't understand why in mine is not....damn
Why not use events? That's the first thing that came to mind.
Second
I was here hoping to find some $event in here..?!
What about $emit ?? 😲😮😱😱😳😬
the sixth way is using bus !
Yes, I thought about showing that, maybe next video
How to call child method from parent
We have index page all child page loaded inside of index page using routing.
We require to consume method of child page from index
First!
Parent: window.message = 'thisisaverygoodidea';
Child: setInterval(() => this.message = window.message, 1337);
I am a React developer. After watching this video, it reminds me of Angularjs 1.x days..
May want a pop filter! Some sounds are "puff" noises when you speak.
Your intro should be smaller
Vuex has a terrible API.