in Vue.js, Vue.js Communication

Vue.js communication Part 1: single component

About the series

Communication in Vue.js is one of the first topics you’ll have to learn about. I came from writing Rails front-ends, mostly server side rendered and using a little bit of jQuery here and there when I was starting to write Vue.js code.

Even though these kinds of frameworks have been around for a long time, it might still be a little bit complicated to wrap your head around frameworks that work with components, which are supposed to create separately but need to communicate to work together.

This is the first article of a series of Vue.js communication articles.

Outline

Vue.js communication: single components

Single components are pretty straight forward. From my point of view, there are a handful of things you need to know to get you started.
It is about how the template and script parts of a Vue component work together. Template and script form one unit and share the same data.

The best part is that some of the techniques can be applied in parent-child communication later!

Template to script: Events

Use events whenever you want to do something after a user event in the UI. The  @click="handleClick" part in the template will call the method handleClick.

You can also pass arguments.

Methods can accept events.

v-for and events

Arguments are useful when you’re using events in a v-for  loop. When you click one of the menu entries, the event handler knows which entry has been selected.

Those were a few examples. There are way more things you can do with events and handlers. The Vue.js guide explains it very well and there are new and more advanced options every now and then.

Everything about events here:

https://vuejs.org/v2/guide/events.html

https://vuejs.org/v2/api/#Instance-Methods-Events

Script to template: Reactiveness

Using the reactive system is enough in most scenarios since you’ll need to change data in the script part of your component, and the template is rendered according to the data changes.

In this example, the script is changing the traffic light every 5 seconds. The template will render every time the value of  isGreen changes. No need to even access the template in any kind of way. Note that we can change the data even though the component might not be rendered by now. The interval will be set in  created . It can be changed independently of the component’s template.

To me, that’s mind blowing when you come from jQuery land. With jQuery you would need to select the node and then change the text. With Vue.js you don’t need to worry.

Script to template: refs

In some cases, you might need a ref even in a single component.

Two examples pop into my mind right away:

  • You want to access DOMNode’s attributes, e.g. canvas image data or a checkbox’s checked value.
  • You want to use another library and pass it the DOMNode.

Here is the canvas example.

See the Pen Single component refs by Christian Gambardella (@gambo) on CodePen.0

Dynamic refs

I have realized this one way too late and I’m almost embarrassed.
Ref will be treated like any other attribute.
That means you can also pass dynamic values.

That’s handy if you have loops.

v-model

When building forms you will want the current data shown in the inputs and the user’s input saved back to the data.

The convention is:

  • Pass the current data as value into the template.
  • Send input events for user inputs.

Whenever you see value and input being used in a component then:
think of v-model

Both versions of the component behave exactly the same.

Final words

I hope you’ve learned something from this.
Feel free to use the comments below if you need help, feel I could have covered something in more detail, or if you just want to say hi!

The next article will be about parent-child component communication.
This is where it becomes more interesting. We can take what we’ve learned here and apply it to child components.

I’ll let you know when it’s ready in my newsletter. Sign up if you want to learn more.

Best,
Christian

P.S. What’s your favorite pizza?

  • Dirk Porsche

    Just to let you know: your site crashes in Chrome on Linux when I leave the tab open for a longer time period.

  • RishiUttam

    Thanks!

    what is the best way to update a class from a child to a parent?
    1) refs
    2) props and event
    3) slots
    4) vuex

    all of them see overkill just to close a modal (i.e update class to !is-selected)

    new subscriber!
    Rishi