Reusing Components in Vue JS
Component Injection, Slots, and Mixins
In software engineering reusability refers to the use of existing assets in some form within the software product development process. These assets are products and by-products of the software development life cycle.
Importance of Reusability
Some might not see the importance of reusable programming. When designing code most only try to solve problems pertaining to them at that time. Ignoring the idea that similar problems might appear in other areas of an application. Reusability of however, is about designing code for repetitive use. Therefore, when you solve a problem one time you’ve solved it everytime and everywhere it appears.
Reusability in Vue
Reusing components can get a little complex. HTML, scripts, styling there are alot of moving parts. Luckily for us, the developers of the framework recognize this and created techniques to help. In the next couple sections we’ll cover things like, component injection, slots, and mixins. Also as a bonus each of these techniques uses a principle of OOP (Object Oriented Programming) at some level. Specifically: composition, inheritance, and abstraction.
Component Injection — Composition:
“Composition describes a class that references one or more objects of other classes in instance variables. This allows you to model a has-a association between objects.”
Thorben Janssen, “OOP Concepts for Beginners: What is Composition?”, stackify.com/oop-concepts-composition/
Component injection is purely composition. “A class that references one or more objects of other classes”. Component Injection is exactly that except our components will reference instances of other components.
To preform an injection start by importing the desired component as an instance variable. Once imported, assign the instance variable as a component in the components option. Doing this allows Vue’s interpreter to know that the assigned variable could later be used in the template.
The first code snippet is of my App.vue file. The second is a snippet of a component called message. Composition wise you could say that App.vue is the “has” a component called message. It is a “has-a” association.
Take a look at the template of App. Nested right under the div is a strange tag, labeled message. As you’ve guessed, this tag is not a standard HTML. It is actually the component imported earlier.
This is the injection part of component injection. By placing that tag we actually injected the template of message.vue into the App file. Once the code mounts onto the DOM, the contents of message renders in place of the message tag.
Overall, this is a pretty helpful tactic. Developers can now easily port pieces of their project into other files. No, rewriting of logic, confusing jqueries or DOM manipulation. We just inject and watch the magic.
Slots — Abstraction:
An abstraction is a general idea rather than one relating to a particular object, person, or situation.
“Abstraction”, collinsdictionary.com
Abstraction is a widespread concept in programming. Java and C++ both use abstract methods. Methods that can be defined and redefined multiple times. This is helpful, for providing the same general functionality with different implementation.
Vue provides us a similar level of abstraction. In Vue we can leave sections of a template abstract. Meaning that the definition of those sections are variable and can be redefined at runtime. Slots grants us this capability. Slots are best used on components requiring varying content. For example, a popup.
Popups are commonplace on websites. Used either to convey information or prompt users for input. A website may have multiple popups on a page and each one might have say something different to say or have a new button to press. Sounds like popups could benefit from a bit of abstraction. We the developer will create the general functionality and styling. The innermost content shall remain fluid.
Here is the template for the popup component. We have two slots present, one assigned to the title, the other to the body. Make a note that slots are only placeholders. Content nested under them passed will render, but the actual slot tag will not.
Let’s do a quick walk through of how it works. Wherever we inject a slotted component is where we will assign content to a slot. First thing to do is make a template tag with add a v-slot directive. V-slot is a special directive. Establish a reference to slots within components. When multiple slots are present follow the directive with a ‘:’ and the name of the target. Anything nested under these templates replace the redefine the content of a slot.
Remember, that the template for each slot only has access to data members within the same file. A reference to data within popup.vue will not work.
Above is the end result. On the left, is the popup rendered from our earlier code snippets. On the right, is a popup made from the same component. The title and body of the right popup has had different text and styling slotted in.
Mixins — Inheritance
“Inheritance is one of the core concepts of object-oriented programming (OOP) languages. It is a mechanism where you can to derive a class from another class for a hierarchy of classes that share a set of attributes and methods”
Thorben Janssen, “OOP Concept for Beginners: What is Inheritance?”, stackify.com/oop-concepts-composition/
Say that you have an app that needs a class for a bus, a car, and a truck. These classes would likely have overlapping properties. Maybe mileage or capacity. It’s also possible for each class to have exclusive properties. You would probably tructure this program using inheritence. Creating a base class containing all the shared properties.
Inheritance is used to emphasize relations and reuse logic in each class. We’ll do the same thing in Vue using a mixin.
Mixins are javascript objects made up of component properties. Data, methods, lifecycle hooks, watchers, and whatever can be stuffed into a mixin. Once defined we can export the mixin and other components will now be able to inherit it’s properties.
Here’s how it is done. As stated before we a mixin is an object of component properties. It needs to follow the same format as a regular component. Define methods under a method property, props under a prop property, etc.
Next, load the mixin into the desired components. Presumably, your mixin will be a pure javascript file. If so, the syntax of importing JS files is slightly different syntax than Vue files.
The mixin from before defined a method “wordReverse”. As you can see, no definition for wordReverse exists within the mixedin.vue file. However, a reference to the function can still be made. That’s the beauty of a mixin. Just like, inheritance we were able to reuse properties across multiple components.
Hopefully you can make use of these tactics to create some reusability within your own projects. Remember, these strategies can be used in conjunction or interchangeably. No one strategy is above the other and you should find a technique that fits your own use case.
Please, like and share this article if you found it helpful. :)
