In this tutorial, we'll explore generating data in one component, and passing it to another in Vue.js.
TL;DR
Here is an example of a working Code...
For further actions, you may consider blocking this person and/or reporting abuse
Nice writeup Alex, thanks for sharing.
I have forked your example and have made it work with a Global EventBus using EventBus.$emit and EventBus.$on. This way any Component can choose to listen to this event which makes for a cleaner solution I think.
You can see my changes here codesandbox.io/s/mq2yl9lw8p
Do you know why would someone choose one over the other method ?
Hey George! Your fork looks great, thanks for providing this.
I did look into using
EventBus.$emit
for the example, but I was trying to keep the components as modular as possible. While creating the fileevent-bus.js
is not a huge lift, it is an additional item the component is dependent on.I think your solution is 100% acceptable.
This was really helpful for a beginner like me, thanks!
Very good post!!
Keep it up. 👍👍👍👍👍👍
This approach to watching the property is very unique. Is there a usecase where it would be preferable to storing the message list in the parent or emitting events from the parent and listening in the child?
Hey Patrick, you are correct. The
watch
property section in the example is somewhat unique. I wanted this component to be able to accept a string from any source and then create an array from that inside the component.I would be interested in seeing an example of what you are suggesting. If you have time, feel free to fork the codesandbox example.
Clear and simple. Thanks!
Nice Sir Alex, what a great tutorial thanks. :) <3
Great explanation! thank for your content!