Typically, the parent component will then perform some sort of action, such as the execution of a function.
What Even Is Emit?Ī definition from Cambridge Dictionary tells us that the formal definition of "emit" is "to send out a beam, noise, smell or gas." Don't worry, our app won't be emitting any strange smells or gases! In our case, the aim is to "emit" a signal-a signal from a child component to notify a parent component that an event has taken place (for example, a click event).
The finished Shopping Cart app built for this article can also be found here: /sunil-sandhu/vue-cart-emit-example. Visit for more info on how to install and use Vue CLI. By all means, feel free to try and build one yourself though with the code examples littered throughout the article. We'll try not to spend too much time going through any further set-up, as the focus here is to show you how to emit data, rather than showing you a step-by-step set-up of our Shopping Cart app. Don't worry if any of this goes over your head, just get used to using it because it's great! 💪 We'll be using the Vue CLI to quickly get some boilerplate code set up, as well as all of the other nice things it brings, such as hot-module-reloading, auto-compiling, etc. With all of this in mind, we're going to write an article that hopefully helps future Vue developers find a clear answer for "how to emit data in Vue" a little easier, while building a neat little Shopping Cart app along the way. In Vue, I initially had a bit of difficulty figuring out how to do this-mainly because I feel that Vue's documentation doesn't cover this as well or as thoroughly as it could (which is a shame, because Vue's docs often excel in most other areas).Īfter a lot of Googling (and trial and error), I ended up figuring out a way to send data upwards from child to parent, but after a while, I found out from a fellow developer that I had been doing this in completely the wrong way-it worked, but I was committing a cardinal sin in the world of anti-patterns. But what about sending data from a child component back up to its parent? This is usually a fairly straightforward concept to grasp. We're able to send data down from a parent component via props (short for properties). However, while the ability to contain functionality inside of a component is great, a component will often need ways to be able to communicate with the outside world or, more specifically, with other components. This is great when it comes to helping a developer avoid repeating chunks of code throughout an application (or even across apps). We’ll do all this while avoiding a common anti-pattern that new Vue developers often make.Ī core concept behind a lot of modern JavaScript frameworks and libraries is the ability to encapsulate data and UI inside modular, reusable components. In this blog, we learn how to emit events from child components in Vue, as well as how to emit from nested child components.
0 kommentar(er)
