Nesting Components (Modularity)

In the previous chapter, we learned how to initialize, build, and debug a simple Vue application. In this chapter, you will discover how to modularize a Vue application using component hierarchies and nesting. This chapter introduces concepts such as props, events, prop validation, and slots. It also covers how to use refs to access DOM elements during runtime.

By the end of this chapter, you will be able to define communication interfaces between components using props, events, and validators, and be ready to build components for your Vue component library or a Vue application.

This chapter covers the following topics:

• Passing props
• Understanding prop types and validation
• Understanding slots, named slots, and scoped slots
• Understanding Vue refs
• Using events for child-parent communication

Technical requirements

In this chapter, you need to set up a basic Vue project following the instructions in Chapter 1, Starting Your First Vue Project. It’s recommended to create a Vue component in a single file to practice the examples and concepts covered here with ease.

The complete code for this chapter is available on GitHub at: https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter04.

Passing props

Props in the context of Vue are fields defined in a child component accessible on that component’s instance (this) and in the component’s template.

The value of a prop depends on what the parent passes in its template to the child component at render time.

Defining a simple component that accepts props

Let’s look at a simple HelloWorld single-file component. You can find this at ./src/components/HelloWorld.vue, generated automatically when you create a Vue project with Vite.

Note how the msg value is set in the props array and that it is interpolated as a value using {{ msg }}.

The props property of a Vue component can be an array of strings or an object literal, each property field of which is a component’s prop definition.

When a value is defined in props, it is then accessible as an instance variable in the template section of the Vue component:

<template>
  <div class="hello">
 ...

Understanding prop types and validation

We use props to define the interfaces of Vue components and ensure other developers use our components correctly. We need to define their interfaces with types and validation. Vue offers that capability out of the box by changing how we pass the props as string elements to the props property in an object form.

Primitive prop validation

Assume we want a Repeat.vue component that takes a times prop and a content prop and then calculates the array of repetitions using computed based on the times value. We can define the following:

<template>
  <div>
    <span v-for="r in repetitions" :key="r">
      {{ content }}
    </span>
  </div>
</template>
<script>
export default {
  props: ['times', 'content'],
  computed: {
    repetitions...

Understanding slots, named slots, and scoped slots

Slots are sections of a component where the template/rendering is delegated back to the parent of the component. We can consider slots as templates or markup that are passed from a parent to a child for rendering in its main template.

Passing markup to a component for rendering

The simplest type of slot is the default child slot.

We can define a Box component with a slot as follows:

<template>
  <div>
    <slot>Slot's placeholder</slot>
  </div>
</template>

The following markup is for the parent component (src/App.vue):

<template>
  <div>
    <Box>
      <h3>This whole h3 is rendered in the slot</h3>
    </Box>
  </div>
</template>
<script>
import Box from './components/Box.vue'
export...

Understanding Vue refs

In Vue, refs are references to DOM elements or other component instances that have been mounted to the DOM.

One of the major use cases for refs is direct DOM manipulation and integration with DOM-based libraries (that usually take a DOM node they should mount to), such as an animation library.

We define refs by using the syntax ref="name" on a native element or child component in the template. In the following example, we will add a reference to the input element under the name theInput:

<template>
  <div id="app">
    <input ref="theInput" />
  </div>
</template>

Refs can be accessed from the Vue component instance through this.$refs[refName]. So, in the preceding example, where we had a ref defined as ref="theInput", it can be accessed through this.$refs.theInput.

Now let’s programmatically focus on the input field when clicking...

Using events for child-parent communication

We have already seen that props are used to pass data from a parent component to a child component. To pass data from a child component back to a parent component, Vue offers custom events.

In a component, we can emit an event using the $emit method; with this.$emit('eventName', payload) within <script>; or just with $emit within the template section.

Assuming we have got a reactive instance property, this.message, we could emit a send event with the message value in the script section using this.$emit. This could be the basis for a MessageEditor component:

<script>
export default {
  data () {
        return {
            message: null
        }
    },
  methods: {
    send() {
      ...

Summary

Throughout this chapter, we have explored how to enable data communication between components using props and custom events. We explored slots and saw how we enable UI template customization for a component from its parent. We also learned how to use refs to unlock integration opportunities with third-party JavaScript or DOM libraries by allowing us to access DOM elements directly.

We’re now able to create and compose components that clearly define their interfaces with inputs (props and slots) and outputs (rendered templates and events), while also visiting commonly faced use cases (such as wrapping a DOM library).

In the next chapter, we’ll look at advanced component composition patterns and techniques that enable better code reuse.