Detailed explanation of how to use Teleport, a built-in component of Vue3

Preface:

Vue 3.0 adds a built-in component teleport , which is mainly used to solve the following scenarios:

Sometimes part of a component's template logically belongs to that component, but from a technical point of view it would be better to move this part of the template to another place in DOM outside of Vue app

Scenario example: a Button that opens a modal dialog box when clicked

The business logic location of this modal dialog box definitely belongs to this Button , but according to the DOM structure, the actual location of the modal dialog box should be in the middle of the entire application.

This creates a problem: the logical location of the component is not in the same place as DOM location

According to the previous Vue2 practice, the dialog box is usually positioned in the middle of the application using CSS properties such as position: fixed ;. This is a last resort. The following shows the basic usage of teleport .

1. Teleport usage

The usage is very simple. You only need to use the to attribute to render the component to the desired position.

// Render to the body tag <teleport to="body">
  <div class="modal">
    I'm a teleported modal! 
  </div>
</teleport>

You can also use:

<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

Must be a valid query selector or HTMLElement


further

2. Complete the modal dialog component

Now let's encapsulate a standard modal dialog box

<template>
  <teleport to="body">
    <transition name="dialog-fade">
      <div class="dialog-wrapper" v-show="visible">
        <div class="dialog">
          <div class="dialog-header">
            <slot name="title">
              <span class="dialog-title">
                {{ title }}
              </span>
            </slot>
          </div>
          <div class="dialog-body">
            <slot></slot>
          </div>
          <div class="dialog-footer">
            <slot name="footer">
              <button @click="onClose">Close</button>
            </slot>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'tdialog'
});
</script>

<script setup>
const props = defineProps({
  title: String,
  visible: Boolean
});

const emit = defineEmits(['close']);

const onClose = () => {
  emit('close');
};
</script>

When using, just

<t-dialog title="LGD is invincible" :visible="visible" @close="onClose"> This is a piece of content, Xiaose Xianbei. </t-dialog>

// ...
const visible = ref(false);

const onDialog = () => {
  visible.value = !visible.value;
};

const onClose = () => {
  visible.value = false;
};

Going a step further

3. Component rendering

We have completed the standard modal dialog component above. There is another similar lightweight prompt component Message that only needs to display a small amount of text.

In the above examples, we always write the TDialog component where it is used, but for this Messgae component, we use a js statement to call it out when we want to prompt it, similar to the following

// Call out a prompt Message({ message: 'This is a Message' });

If we want to use a function to call it out, we need to prepare this function. The function of this function is to complete the rendering of the component.

const Message = options => {
  // Prepare to render the container const container = document.createElement('div');
  // Generate vnode
  const vnode = createVNode(MessageConstructor, options);
  // Renderrender(vnode, container);
};

What is MessageConstructor ? This is our SFC (single file component):

<template>
  <teleport to="#app">
    <transition name="message-fade">
      <div v-show="visible" ref="ins" class="message" :style="customStyle">{{ message }}</div>
    </transition>
  </teleport>
</template>

Online Experience

View Code

Summarize:

The above is about the basic usage and extended usage of teleport component, which provides us with a lot of convenience. This is the end of this article on the detailed usage of the Vue3 built-in component Teleport. For more relevant content on the usage of the Vue3 built-in component Teleport, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!