Mastering Vue Component Hierarchies: Avoid Common Pitfalls with Slots

Vue.js is a progressive framework for building user interfaces, offering a simple API for reactive data binding and component composition.

Reasonable Use of Vue Child Components

In an early performance‑management project, each department level was implemented as a separate child component, resulting in a deeply nested hierarchy (five levels) where communication between parent, child, and sibling components became overly complex.

Typical issues included:

Excessive nesting of child components.

Redundant event handling (using $emit and $on) for simple actions.

Naming mismatches between camelCase in JavaScript and kebab‑case in HTML, causing listeners to fail.

To simplify, a single reusable child component was created and placed directly under the root Vue instance, allowing each department level to invoke the same component without deep nesting.

Optimizing with Slots

When multiple dialogs share common structure (header, border, buttons) but differ in body content, the slot mechanism can be used to inject custom sections while keeping the shared layout in a base component.

Key advantages of slots:

Reduces the number of nested components.

Allows dialog bodies to directly access data from the parent component (e.g., {{dataInfo.name}}).

Eliminates duplicated close‑dialog functions; a single closeDialog() call suffices.

Example of a dialog component using slots:

<template id="dialog-pox-template">
  <div class="dialog-wrap" v-if="showDialog" @click="closeDialog">
    <h2 slot="title">Delete Item</h2>
    <div class="eval-content dialog-delete" slot="body">Confirm deletion of {{dataInfo.name}}?</div>
    <div slot="btn">
      <button class="btn-add" @click="closeDialog">Confirm</button>
      <button class="btn-cancel" @click="closeDialog">Cancel</button>
    </div>
  </div>
</template>

Usage in a parent page:

<dialog-pox :showDialog="isDialogShow" :configure="dialogConfig">
  <template slot="title">Custom Title</template>
  <template slot="body">Custom body content using parent data</template>
  <template slot="btn"><!-- optional custom buttons --></template>
</dialog-pox>

Images illustrate the component hierarchy and slot distribution:

Summary

Through real‑world projects, the author learned that early mistakes—such as over‑nesting components and inconsistent naming—are valuable stepping stones. By refactoring with reusable child components and leveraging Vue's slot mechanism, code duplication is reduced, communication becomes clearer, and UI flexibility increases, embodying the principle that practical experience deepens theoretical understanding.