Analysis on the difference between Teleport and Portal in Vue3

The difference between Teleport and Portal in Vue 3

In modern front-end development, especially when building with, developers often face the problem of how to more effectively manage the relationship between DOM structure and components. Vue 3 introduces two attractive concepts - Teleport and Portal. These two concepts are semantically similar, but there are obvious differences in specific implementation and usage scenarios. This article will explore the differences between the two in depth and use sample code to help you better understand their usage.

What is Teleport?

Teleport is a very powerful new feature in Vue 3 that allows the rendering output of a component to be "transferred" to other parts of the DOM tree. Simply put, Teleport allows you to generate components anywhere without being bound by component parent-child relationship. This is especially useful for scenarios such as modal boxes, prompt boxes, and drop-down menus, as these components often need to be placed at the top or at a specific location of the DOM tree.

Basic usage of Teleport

Using Teleport is very simple, you just need to use the <teleport> tag inside the component and specify the destination location. Here is a simple example:

<template>
  <div>
    <button @click="showModal = true">Open the modal box</button>
    
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <span class="close" @click="showModal = false">×</span>
          <h2>Modal box title</h2>
          <p>This is the content of the modal box。</p>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

In the above code, the modal box component is placed in the documentbodyThis ensures that it is not affected by the style and layout of the parent component. We can passshowModalVariables control the display and hiding of modal boxes.

What is Portal?

Portal is a higher level concept that focuses more on handling the rendering position of components in the UI framework. Portal can be understood as a bridge that renders child components to a DOM node defined by the parent component, rather than the DOM structure by default. This means that Portal can handle complex UI scenarios more flexibly.

It should be noted that Vue 3 itself does not directly provide Portal components, but can create its own Portal implementation based on Teleport. Here is a simple custom portal example:

Custom Portal implementation

<template>
  <div>
    <button @click="togglePortal">Switch Portal</button>
    
    <portal v-if="isVisible" :to="portalTarget">
      <div class="portal-content">
        <h2>This isPortalcontent</h2>
        <p>PortalComponents can be rendered flexibly anywhere。</p>
      </div>
    </portal>
    
    <div  style="position: fixed; top: 20px; right: 20px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
      portalTarget: "#portal-target",
    };
  },
  methods: {
    togglePortal() {
       = !;
    },
  },
};
</script>

<style>
.portal-content {
  background: lightblue;
  padding: 20px;
  border: 1px solid blue;
  border-radius: 5px;
}
</style>

In this example, we create a simple Portal component that toggles the display status of the Portal by clicking the button. Portal's content is rendered to#portal-targetIn an element, this element can be anywhere in the page.

The difference between Teleport and Portal

Although both Teleport and Portal are used to handle the relationship between DOM structures and components, they differ significantly in core ideas and usage scenarios:

1. Definition and purpose：

   • Teleport is mainly used to move the output of the component to other locations in the DOM, and is suitable for scenes such as modal boxes and prompt boxes that need to be separated from the context of the parent component.
   • Portal is a relatively more flexible concept. It can render child components to any DOM node defined by the parent component, and it is more applicable to a wider range of scenarios.

2. Implementation method：

   • Teleport is a built-in feature in Vue 3, through<teleport>Tag implementation, direct operation of DOM.
   • Portal usually requires developers to customize and is implemented internally by combining Teleport.

3. Use scenarios：

   • The advantage of Teleport is to optimize the display effect of specific UI components (such as modal boxes).
   • Portal is more suitable for building flexible and dynamically rendered complex components.

in conclusion

In Vue 3, Teleport and Portal provide developers with powerful DOM management capabilities, making rendering components in complex UIs more efficient. Understanding the difference between them can help developers choose the right solution in development and improve code quality and maintainability.

As our understanding of Teleport and Portal deepens, we can build Vue applications more flexibly, making the user experience more smooth and friendly. Hopefully, with this article, you will be able to use these two powerful features more easily in your project, adding more possibilities to your development journey.

This is the end of this article about the difference between Teleport and Portal in Vue3. For more information about the differences between Teleport and Portal in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!