DEV Community: Chris Y.

Vue.js Components Communication Patterns (without Vuex) - Part 3

Chris Y. — Tue, 23 Nov 2021 12:29:41 +0000

Upward-broadcast and Downward-broadcast patterns

In Part 2 of this series, we used the "$parent" and the "$children" patterns to enable components to communicate in a three-level hierarchy. Towards the end, we had a question in mind for an even more complex hierarchy of components, e.g. what if there are ten levels of components? Do we need to do something like:

this.$parent.$parent.$parent.$parent.$emit('anyEvent', args);

Let alone the children components can be hard to track.

This leads to the pattern to be introduced here in Part 3.

First, all the example components we have worked through form a data structure called Binary Tree. Below is the graphic from the Vue documentation for nested components in the computer memory when a Vue app is running:

Here is another binary tree with more levels:

Now suppose we have these components below nested together:

App

Parent

ChildA

GrandchildA

In App, we bind an event named change:font onto Parent, the callback function is handleChangeFont which will update the font size for Parent and its descendants, according to the argument size passed in.

Parent is the same as previous examples, it maintains a list of desserts and passes it to ChildA:

ChildA and GrandchildA are simple, ChildA receives the prop and passes it down to GrandchildA:

And this is what the view looks like at the moment:

Now for some business requirements, users want to change the font size by clicking a button named Change Font Size in GrandchildA:

We can do so by utilizing the "$parent" pattern from Part 2:

Line 30 is the "$parent" pattern in action. Click on the button, the font size on the view becomes 20px:

Awesome!

But as you can see, with the complexity of the nesting, we would have to code something like:

      this.$parent.$parent.$parent.$parent.$parent.$emit('change:font', '20px');

if users want to add that button in a grand-grand-grand-grandchild component.

A better solution in a large tree structure would come in handy.

Upward broadcast pattern

If a component wants to inform an ancestor component via triggering one of its events, this component can literally "broadcast" upward to all its ancestors about an event it wants to trigger, and if one ancestor component has that specific event registered, it will perform the callback function automatically. We can implement this event mechanism on the Vue prototype object, so all the VueComponent instances can have access to it via this.

In main.js, let's create a function named $upwardBroadcast on Vue.prototype:

The $upwardBroadcast function has two parameters:

event: the event being broadcast upward from the current component
args: the data being passed when emitting the event

It will broadcast an event from the current component upward to all the ancestors, if one ancestor in the upward tree hierarchy has that event registered, it will respond and execute the callback function registered alone with the event. Let's implement it:

First, at line 12, we save the parent of the current component. In lines 12 - 16, if the parent exists, it will use the parent instance to emit the event, then proceed to the parent's parent, and the parent's parent's parent, etc.
The while loop stops when there is no parent anymore, meaning it has reached the top (root) node on the tree.

Now let's see how to use it to improve the previous "$parent" pattern in GrandchildA. Very simple, just one line of change:

Line 31 replaces line 30 and uses the $upwardBroadcast function via this, and it broadcasts the event change:font and passes the argument '20px'. If we click the button, the font size changes as before:

Special Note

Here I say "uses the $upwardBroadcast function via this", not "on" this, because $upwardBroadcast is not defined on the VueComponent instance created from the VueComponent constructor function, but on the Vue constructor's prototype - as what we did in main.js. Yes, a better understanding of Vue.js requires a solid foundation of JavaScript basics, that's why I like Vue so much - you are not just using a framework to do the work, but you get to consolidate and deepen basic knowledge of JavaScript.

But if you think about it a bit - how come a VueComponent instance can access the Vue constructor's prototype?Actually, Vue did one thing on top of the JavaScript prototype chain - it modified where VueComponent.prototype points.

Also, the function name starts with a $ sign, and this is only because this is the convention of all the built-in properties and methods in Vue.js.

Downward broadcast pattern

Now let's implement a downward broadcast mechanism. In main.js, let's create another function named $downwardBroadcast on Vue.prototype:

It has the same two parameters as $upwardBroadcast, and it will broadcast an event from the current component downward to all the descendants, if one descendant in the downward tree hierarchy has that event registered, it will respond and execute the callback function. We can do so:

First, we get all the descendants of the current component, and for each child, it will emit the event. Here what is different from one child only having one parent in $upwardBroadcast, is that now each child can have many children, so if there are any children components of a current child, we need to repeat the same logic, as seen in line 28.

This is the perfect case for recursion, and let's implement it:

In the function body, we create another function called downwardBroadcast. First, we execute this function by passing in the current component's this.$children array, as seen in line 33. Then within downwardBroadcast, we loop through the children array, and if there are children under the current child, we will execute downwardBroadcast again, passing in the current child's $children.

Now our main.js looks like this:

Time to see it in action. We will downward broadcast an event named show:year in App to all its descendants after clicking a new button named Display current year, and the argument passed in is the current year:

In ChildA, we bind this event onto GrandchildA, the callback function is ChildA.showYear():

Click on the button, the alert window is shown:

The broadcasting is powerful, isn't it?

Encapsulate the functions ( Hooks / Composition style)

One thing we can improve is to move the functions in main.js into a separate file - src/hooks/events.js,
so this file contains functions that enhance the event system on Vue.prototype:

Following the naming convention of Hooks or Composition API, we create two new functions named useUpwardBroadcast and useDownwardBroadcast, the parameter is the Vue constructor function. Within each function body, it is the previous function defined.

Now in main.js:

we can import these two functions and run them to enhance Vue.prototype, if we need.

In the next part of this series, we will explore another mighty Vue.js components pattern.

Here are all the articles in this series:

Vue.js Components Communication Patterns (without Vuex) - Part 1

Vue.js Components Communication Patterns (without Vuex) - Part 2

Vue.js Components Communication Patterns (without Vuex) - Part 3

Vue.js Components Communication Patterns (without Vuex) - Part 4

Vue.js Components Communication Patterns (without Vuex) - Part 5

Vue.js Components Communication Patterns (without Vuex) - Part 6

Vue.js Components Communication Patterns (without Vuex) - Part 7

Build your own Vue.js UI library based on Vuetify and publish it to NPM

Chris Y. — Tue, 23 Nov 2021 00:21:35 +0000

Customize and enhance Vuetify components

Vue.js is a simple yet powerful front-end JavaScript framework that is designed exquisitely. In my opinion, Vue.js is the first choice for the UI of middle to large-sized projects. Over the years, there are a wide range of UI component libraries for Vue.js, and the most popular one seems to have been Vuetify. Often based on our own business and project requirements, we need to customize an open-source UI library component, and this article shows how to build our custom UI components based on Vuetify.

Create a Vue + Vuetify project

First Let’s create a new Vue.js project with Vuetify. Following the Vuetify guide, it is very easy:

We first create a new project named custom-ui using Vue CLI:

vue create custom-ui

then in the project root, run:

vue add vuetify

And it’s all ready to go. After cleaning up App.vue and delete HelloWorld.vue, our project structure looks like this:

It currently just renders a blank page.

Now let’s use a Vuetify button component <v-btn> and see how it works:

Here we used:

a prop named color to specify a primary material design color (by default it is grey color),
a prop named rounded to make the button have rounded edges (by default it is not rounded),
an event listener for the click event,
an event listener for the mouseover event,
the text "Custom Button" for the button.

Once clicking the button or mousing over it, the event handler functions are triggered and the text is output in the console:

It works as expected.

Suppose now we need to use this button (with primary color, rounded edges, default text, and two mouse events) in multiple places in our project and later in other projects as well, instead of copying and pasting code, ideally it is better to encapsulate what we have done into a new component. Later we can publish our custom UI library onto npm, and whichever project needs to use them can just npm install the package.

Let’s go ahead and create this custom component first.

We will create a new directory named MyLib, and within it, we create an index.js file and a MyButton component:

Like many open-source libraries, the purpose of the index.js file is to import all the components and export them out in one big object.

We move the <v-btn> from App to MyButton, and import MyButton from MyLib, the project now looks like this:

The two event handler functions are still in the parent App component, and the events are bound on the child component MyButton, which is the common practice in a component-based framework. Within MyButton, we still have the "default" value for color, rounded, and button text. For a component, we want it to be able to accept props passed from the parent, and props can have the default values that we want, so let’s add three props for MyButton:

The props color and rounded are bound onto the <v-btn>’s color and rounded, and text is placed in a slot. Refresh the page, the button still looks the same as before with the default values.

Now we can pass different values for these three props in the parent App component as well:

The color, edges, and text of the button are all changed. For the text, you can also pass a slot to MyButton, and it will override the default one.

If you take a look at <v-btn>'s API document, it has many other props. Let’s try some on MyButton:

We add outlined onto our MyButton component according to <v-btn> API. If you refresh the page, the button actually does not become the outlined style. It is not working, why? Because our own component works like a wrapper component for <v-btn> — we can customize some styling, add some default values, etc., which is similar to a concept popular in React.js — Higher Order Component. What we can do now is to use a powerful feature in Vue.js —$attrs.

$attrs

The document briefs $attrs as below:

Basically what it means is, in a parent component such as App, when we bind some attributes onto a child component such as MyButton, if these attributes are not declared in the child component as props, then Vue.js will add those attributes onto the root element of the child component.
Let’s see it in action.

In App, we have already bound a new attribute outlined on MyButton, now in MyButton, we will add v-bind="$attrs" onto the <v-btn> in MyButton component:

Refresh the page, and it works:

What happened is, because of v-bind="$attrs", now any non-declared attributes passed from App to MyButton (such as outlined) are added onto the root element of MyButton, which is <v-btn>, and outlined is a prop defined in <v-btn>, so it works on it and the outlined button is rendered.

In a nutshell:

$attrs is an object on a VueComponent instance that collects all the non-declared attributes bound onto this component.
In the $attrs object, the key name is the attribute name, they value is the attribute value.

Correspondingly:

$props is an object on a VueComponent instance that collects all the declared properties bound onto this component.

Let’s output $attrs and $props in MyButton to see them more clearly:

Both $attrs and $props are important properties on the VueComponent instance. Also, you can iterate $attrs or extract certain attributes out, depending on your needs. If you want to apply v-bind="$attrs" onto other elements in the <template> instead of the root one, you can set the inheritAttrs option to false in the component’s configs object. Please refer to the document about inheritAttrs.

So far we can apply all <v-btn>'s props on our MyButton, which is nice thanks to $attrs.

Let’s take a look at the two event listeners now. If you click on or mouse over the button, the two event handler functions currently are not triggered.
Similarly, there is another mighty VueComponent instance property called $listeners that can help.

$listeners

According to the document:

What it means is, in the parent component App, all the events (DOM native or custom) bound onto the child component MyButton will be collected into
the child component’s $listeners object. Let’s output it in the console to take a look:

The $listeners object contains the two events click and mouseover that the parent App bound onto it.
Now we can add a new line of code v-on="$listeners" on <v-btn> in MyButton:

Refresh the page and click on the button again:

The event callback functions are working now, awesome.

In a nutshell:

$listeners is an object on a VueComponent instance that collects all the events + event handler functions bound onto this component.
Like $attrs, a component can pass its $listeners to a descendant component.

In MyButton, by adding v-on="$listeners" on its child component <v-btn>, it passes its $listeners to <v-btn>,
and when the event (the key filed in the $listeners object) is triggered, the corresponding callback function defined in the parent will be executed.

Except for v-on="$listeners", you can also execute an event callback function directly in the child component using this.$listeners.eventname(), or you can destructure the $listeners object and even add new key:value pair into it to suit your specific needs.

Publish to NPM

Now our MyButton component is ready to go. We can import it into other places in the project, or we can enter the MyLib directory, run npm init to generate a package.json file, add the necessary metadata for our custom MyLib UI library, and run npm publish to push it onto npm. Other projects just need to install the MyLib package and can use MyButton and other custom components.

For more articles about $attrs and $listeners, please check out:

Vue.js Components Communication Patterns (without Vuex) - Part 4

Vue.js Components Communication Patterns (without Vuex) - Part 5

Vue.js Components Communication Patterns (without Vuex) - Part 2

Chris Y. — Mon, 22 Nov 2021 22:49:03 +0000

$parent and $children patterns

In Part 1 of this series, we introduced two patterns that work perfectly in a two-level component hierarchy, but what about a three-level or even four or five-level hierarchy?
Now following the starting examples of Part 1,
let's add a new component GrandchildA, and here is the initial state of the three components:

Parent has a ChildA component that gets an input event bound onto its tag. This is the "custom v-model" pattern discussed in Part 1.

Similar to Parent, ChildA now has a GrandchildA component that gets an input event bound onto its tag, and it passes the desserts data it receives from Parent into GrandchildA. Notice the watch function for its prop value at line 38, this is to make sure whenever the prop changes, ChildA.desserts will get the latest value.

Also, GrandchildA will pass its data to ChildA, and ChildA will pass it back to Parent, as seen in lines 43 - 46.

GrandchildA has the same settings as ChildA in Part 1, it has a button where we can add a new dessert.
In the event handler function handleUpdate, it will use $emit to trigger the input event bound onto it in ChildA, and pass the new data as the argument.

Here is the current view:

Now if the user clicks the Update button on GrandchildA, the view becomes:

GrandchildA sends the updated desserts to ChildA by this.$emit('input', this.desserts), and ChildA does the same and passes the data to Parent, Parent updates its this.desserts using the new value, and passes it down to ChildA as a prop. ChildA is watching the prop value change, so it will update its this.desserts, and this.desserts is passed down to GrandchildA as a prop.

So in order for GrandchildA to communicate with Parent, it must go through the middle man ChildA. How about now we add a GrandGrandchild component? It will follow the same approach, and both ChildA and GrandchildA will become the middle man. When it comes to a multi-level hierarchy, we can repeat the two patterns from Part 1 in each descendant component, but there is a better way.

$parent pattern

Now let's modify GrandchildA.handleUpdate():

Thanks to the exquisite design of Vue, we don't really need to trigger the input event on GrandchildA and then execute the callback function in ChildA. Instead, in GrandchildA we can directly trigger the input event on ChildA using this.$parent to execute the callback function in Parent, because GrandchildA.$parent = ChildA. Super simple, isn't it?

Since we don't need ChildA to do the middle man work anymore, now ChildA can be very simple:

ChildA becomes to only receive a prop and pass it to GrandchildA. If we click the Update button now, it works the same:

The new desserts data is updated from GrandchildA directly to Parent, then passed down to ChildA and GrandchildA.

$children pattern

In a Vue component tree, there is $parent, and of course, there is $children as well. Let's see an example of $children. We will leave GrandchildA as is, while in ChildA, now we bind a new event named show:alert onto the GrandchildA tag:

And the event callback function is handleShowAlert which will show an alert. Now in Parent, let's add a new button:

When clicking the button, we want to trigger the show:alert event on GrandchildA, which will, in turn, execute ChildA.handleShowAlert() to show the alert. This is achieved using:

this.$children[0].$children[0].$emit('show:alert');

Because $children is an array of VueComponent instances and there is only one child for both Parent and ChildA, we can use $children[0].
Now if the user clicks the button:

An alert is shown as expected.

Conclusion

For a multi-level hierarchy of components, the "$parent and $children" patterns are suitable as they can reduce the level-by-level data passing between components. But if there are too many levels, then we would have to do something like this:

this.$parent.$parent.$parent.$parent.$emit('input', this.desserts);

Also, a parent component can have many children components, and each child component can have its many children components. How can we pinpoint a specific child component in the $children array? This question will lead us to Part 3 of this series where we will look to solve it.

Here are all the articles in this series:

Vue.js Components Communication Patterns (without Vuex) - Part 1

Vue.js Components Communication Patterns (without Vuex) - Part 2

Vue.js Components Communication Patterns (without Vuex) - Part 3

Vue.js Components Communication Patterns (without Vuex) - Part 4

Vue.js Components Communication Patterns (without Vuex) - Part 5

Vue.js Components Communication Patterns (without Vuex) - Part 6

Vue.js Components Communication Patterns (without Vuex) - Part 7

Vue.js Components Communication Patterns (without Vuex) - Part 1

Chris Y. — Mon, 22 Nov 2021 22:34:05 +0000

Custom v-model and .sync patterns

About this series

Communication between components is one of the core parts of frontend frameworks. First, same as React, Vue's data flow is also one-way. You might have come across "two-way data flow using v-model" in some tutorials, but that is not accurate. Data flow in Vue is unidirectional. Vuex is great for sharing data between components, but when it comes to some scenarios such as building a UI library or a state management library, Vuex is not suitable anymore, and we need to utilize the build-in mechanism of Vue itself.

Custom v-model pattern

Here we have two components - Parent and ChildA:

Parent displays a list of desserts which is an object array defined in the data option, and also passes it to ChildA's prop value. It also binds an event named input onto the ChildA instance, with the callback function being its parentUpdate method.

Now let's look at ChildA:

ChildA also has a reactive data field named desserts and its value is from the prop value that Parent passes in. At line 29, notice the spread operator - because of reference type, we need to make a copy of the data passed in by props. Otherwise, line 34 will modify the prop array directly, which will break Vue's one-way data flow.

This is how the page looks at the moment:

When the button is clicked, ChildA will emit the input event bound onto it by Parent, and the argument passed to
Parent.parentUpdate() is ChildA.desserts. At line 47 in Parent.parentUpdate(), Parent updates its desserts using the value passed from ChildA. Now the view:

This pattern can make sure some data in Parent and ChildA is "in sync". Data still flows one-way as we can clearly see above.

We can also make the code a bit more concise by writing the function inline:

because the logic here is just an assignment statement, we don't really need to define a method, and it works as before. Also, because this type of code is very common in application development, Vue has a shortcut syntax for it: v-model. If we replace the <ChildA> tag in Parent with this one:

We get the exact same result.

In addition, you can change the prop and event name using the model option https://vuejs.org/v2/api/#model.

.sync pattern

Since the event name is just a string registered in the event system as a key, how about in Parent we change the event name bound onto ChildA from input to the string update:value, to be more meaningful. Let's go back to the example before using v-model and update the event name:

As the event name is changed, in ChildA now it needs to emit the new event name to trigger the event:

Run the code, and it works exactly the same as before. And similar to v-model, Vue has another syntax shortcut for it which is v-bind:value.sync. If we update Parent:

The result is the same.

What's under the hood

When Vue uses its compileToFunctions function to compile the <template> of a component:

for any v-model in the <template>, it will generate v-bind:value="xxx" and v-on:input="val => this.xxx = val".
for any v-bind:value.sync="xxx" in the <template>, it will generate v-bind:value="xxx" and v-on:update:value="val => this.xxx = val".
for any event bound onto a child component tag:

    <Child
      @anyEvent="parentUpdate"
    />

it will generate an object like so: {anyEvent: parentUpdate}, and this object will be passed onto the Child component instance (of VueComponent type). When the Child component gets this object, it will mount it onto itself via this.$on('anyEvent', parentUpdate). This way, the Child component can trigger its anyEvent event via this.emit('anyEvent', args) ( an event name is just a key registered in Vue's event system), and the callback function registered (a method on the Parent component) will be executed.

Conclusion

The custom v-mode pattern and the .sync pattern work well in many cases, but what if we have a grandchild component and a grand grandchild component? Of course, we can repeat these two patterns in each descendant component, but will it start to become a bit clumsy? And this is what the Part 2 of this series is about.

Also check out the rest articles in this Vue.js components patterns series:

Vue.js Components Communication Patterns (without Vuex) - Part 2

Vue.js Components Communication Patterns (without Vuex) - Part 3

Vue.js Components Communication Patterns (without Vuex) - Part 4

Vue.js Components Communication Patterns (without Vuex) - Part 5

Vue.js Components Communication Patterns (without Vuex) - Part 6

Vue.js Components Communication Patterns (without Vuex) - Part 7