VueJS - Props, eventBus, Vuex... Battle Royale TO THE DEATH
Tags: vue, beginners, vuex, javascript
Published: 2018-06-18 12:41:22

---
title: VueJS - Props, eventBus, Vuex... Battle Royale TO THE DEATH
published: true
description: Three different ways to pass data battle it off in the squared circle.
tags: vue, beginner, vuex, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kk152dokrd13g9qh1lzp.jpg
---

![Mean Gene Front](https://thumbs.gfycat.com/AthleticMindlessGourami-size_restricted.gif)

Mean Gene Okerlund here, and folks we've got a treat here for you in the Evan You Memorial Colosseum in San Francisco, California.

Some say it was the fight that could never happen. That there would be too much at stake, and yet we find ourselves here seeing, indeed, who can handle data passing the best.

The rules for this match are simple, and brought to you by Vue-Cli3. They're newly revamped ladies and gentlemen, certainly one of our favorites:

![Vue-Cli3 install](https://thepracticaldev.s3.amazonaws.com/i/9mmp74cqikqi1ia4v2dc.png)

Let's meet our three combatants:

**Yokozuna (Props)**
**Randy 'Macho Man' Savage (eventBus)**
**The Ultimate Warrior (Vuex)**

And let's take a look at this gorgeous ring, provided to us by the wonderful people at VueJS and Bootstrap4:

![Home.Vue screen](https://thepracticaldev.s3.amazonaws.com/i/arnqv9gf4t8vsv4lvczf.png)

*Home template with Bootstrap for layout purposes. Wrestler information in the array wrestlerList.*

![Display on localhost](https://thepracticaldev.s3.amazonaws.com/i/608fmhjcigen8yxvey5t.png)

First up is the Behemoth from Japan, the former Sumo Wrestler turned WWE phenom... 

##Yokozuna (Props)

![Yokozuna](https://media1.giphy.com/media/xULW8OJ9Fc9CKZTeCY/giphy.gif)

Yokozuna's strength is world renouned, and his voracity is just as infamous. I've seen the 600-pounder put down a few cheeseburgers in my day.

Unfortunately those 600 pounds don't allow for all that much mobility, and Yokozuna is limited to being able to grapple with only his closest opponent.

But that doesn't mean he can't be quite devastating; no one wants to find themselves on the bottom side of the tremendously powerful Bonzai Drop.

Yoko walks slowly to the ring:

![Yoko Home Register Component](https://thepracticaldev.s3.amazonaws.com/i/3ctp1vjr4fdg6cqlxq8b.png)
*Import yokoComponent from components folder. Register component. Then add to template. Then  we pass the prop to the child component with yokoProp.*

And here we see him setting himself up to enter between the ropes. No small feat, let me tell you what.

![Yoko Component](https://thepracticaldev.s3.amazonaws.com/i/l4alw7by8tlg28k0vgdo.png)
*In the Yoko component, register the prop. Use validations, like type or required, if desired. https://vuejs.org/v2/guide/components-props.html#Prop-Validation. We'll be using the textarea later, but in the image below we're just displaying it as a text field. Also note the $emit method connected to the textarea through the finisherChange function which is triggered when changed.*

If you look closely you can see that Yoko's information is being passed via the Prop move, a closely guarded training secret among WWE's elite, allowing the knowledge of generations of wrestler's to pass from one to the next.

![Yoko Drop](https://i.imgur.com/tw6mwVI.gif)

But amazingly, Yoko can also use the Prop move to also pass that knowledge right back up to his glorious wrestling forefathers.

You heard that right folks, if you train hard, stay focused, and eat your vitamins you too can master this move:

![Yoko with update on prop](https://thepracticaldev.s3.amazonaws.com/i/u99o41bibqi61n11qrfm.png)
*Add the @update prop in the Home template that changes Yoko's information in wrestlerList when the textfield in the child yokoComponent is the updated.*

![Yoko update parent vue](https://i.imgur.com/gCAM9qB.gif)

But what's that?

{% youtube Rblh_0d7Qlw %}

It can only mean that one of WWE's most misunderstood wrestlers is coming to the ring...

##Randy 'Macho Man' Savage (eventBus)

Folks, let me tell you from the start, Macho Man is a fan favorite with his crazed eyes, and that hellish elbow drop from the top rope.

Tonight he isn't accompanied by his better half, the stunning Miss Elizabeth, which means that Macho is here strictly to handle some business.

As I said, that flying elbow is quite the sight to see, and may even make Yoko look like yesterday's trash. But that death defying style comes with it's own risks.

Let's take a look at how Macho Man is planning on getting on the top rope:

![Macho Man Top Rope](https://thepracticaldev.s3.amazonaws.com/i/vz1hrm9gh1vq48y3n2nu.png)
*Pass machoProp from Home.vue to topRope component.*

![Macho Top Rope](https://thepracticaldev.s3.amazonaws.com/i/7t5soazjb7nfxnega5v9.png)
*Register flyingThroughTheAir component in the topRope component.*

![Macho standing](https://thepracticaldev.s3.amazonaws.com/i/nys0omrakm3a3d1o6ow6.png)


The secret to Macho's success lies in the stability of the ring:

![Macho elbow defined in main.js](https://thepracticaldev.s3.amazonaws.com/i/nujkfif0h6fx78ak0lkk.png)
*In main.js file create the eventBus.*

It's here that Macho can use the force created by his massive leg muscles, to propel him all the way across the ring:

![eventBus defined in Home.vue]
(https://thepracticaldev.s3.amazonaws.com/i/uggcqsbeedwf0dlfst1f.png)
*Register the eventBus in Home.vue. Also add a button that triggers eventBus to emit Macho Man's information.*

![Flying Through The Air Vue](https://thepracticaldev.s3.amazonaws.com/i/ps9mrhu21z85ltnlt95h.png)
*In the flyingThroughTheAir component, register eventBus, and use the $on event to add the passed Macho Man information into the machoInfo data object in the component.*

![Macho dropping the elbow](https://i.imgur.com/8rAB10W.gif)

Absolutely devastating.

But what's that! It can't be! It's none other than...

##The Ultimate Warrior (Vuex)

![Ultimate Warrior](https://media.giphy.com/media/Xh1yjq8vZVqik/giphy.gif)

Ladies and gentleman, sprinting to the ring, hair and tassels flowing like the manes of a stallion on the Montana planes comes The Ultimate Warrior.

I can't believe this is happening. Yokozuna and The Macho Man are looking around confused, they're demanding the referee does something about this interruption.

Many say that The Ultimate Warrior can do it all. We've seen him lift a tree trunk over his head, and then jump across a canyon. It's rumored that his biceps could power a city and that he may have swum across the Pacific Ocean.

Thankfully, the ring was already prepared to handle the awesomeness of The Ultimate Warrior, thanks again to our great sponsors at VueJS, "You Code 'Em, We'll Grill 'Em."

Here's a break down of The Warrior's training regime, this is high level secret info that we're exclusively bringing to you:

![Home Map Action](https://thepracticaldev.s3.amazonaws.com/i/gefiinq0j2r4asvkh8du.png)
*Register the runningToTheRing component in the Home.vue, and add to the template. Also register Vuex's addAction method, and add the mapActions helper in the component's field (mapActions are in methods, while mapGetters are in Computed). Note - the image is missing runningToTheRing in the components area.*

![Running Action and Get](https://thepracticaldev.s3.amazonaws.com/i/0jqbpnv2gj9sm1pgpgaz.png)
*In the runningToTheRing component register the shakingTheRopes component. Also add the shakingTheRopes Vuex action and wrestlerInfo getter helpers, and register mapAction and mapGetters helpers from vuex.*

![Shaking the ropes](https://thepracticaldev.s3.amazonaws.com/i/sygza6nz4yyrrjuzk8dt.png)
*Finally in the shakingTheRopes component add a getter for ropesWrestlerInfo*

The Ultimate Warrior is a complicated wrestler, he's not just all brawn and buff. And thanks to his training and amazing physique he easily powers his way through any challenge:

![Empty Vuex](https://thepracticaldev.s3.amazonaws.com/i/fp4eff6d43ddf23742dq.png)
*The empty Vuex structure. I added a getters section on the initial install from Vue-Cli.*

![Vuex With All](https://thepracticaldev.s3.amazonaws.com/i/ixgblx927aqd1nac4w7y.png)
*Vuex with all actions, mutations, state, and getters.*

We see here that The Ultimate Warrior can pass data wherever he pleases. He can work it down into mince meat if he needs to, or even share with all the loyal Little Warriors out there.

![Home with Bttn](https://thepracticaldev.s3.amazonaws.com/i/r1rfnl82fuj17x33qjzq.png)
*Add THE ULTIMATE button which triggers the runningToTheRing action, which adds the Ultimate Warrior's info to the state using a mutation, and can be retrieved as a getter.*

![Running with Bttn](https://thepracticaldev.s3.amazonaws.com/i/dv51hwwwhnzklezrdvk5.png)
*runningToTheRing has a similar format, except it has an action and a getter.*

![Ultimate Running](https://i.imgur.com/qsTc16T.gif)

And that's it folks. I think we can call this one a draw. Each combatant showing their stuff for each situation. A clash of Titans that leads to voluminous stories to tell. I'm sure we'll be seeing this battle again soon.

For more info check out the fantastically illuminating documentation by the fine people at VueJS:
[VueJS Documentation](https://vuejs.org/v2/guide/)

Till next time, this is Mean Gene signing off.

![Mean Gene Here](https://ringthedamnbell.files.wordpress.com/2018/01/geneo1.gif)