Detailed explanation of using Vue3 built in component Teleport

Directory 1, Teleport Usage 2, Modal Dialog Completion Component 3, Component Rendering

Foreword:

Vue 3.0 A new built-in component has been added teleport Mainly to solve the following scenarios:

Sometimes part 1 of a component template logically belongs to the component, but from a technical point of view, it is best to move this part of the template to DOM Medium Vue app Other locations besides

Scene example: 1 Button Click the Outgoing Modality Dialog Box

The business logic location of this modal dialog box must belong to this Button , but according to DOM Structurally, the actual position of the modal dialog box should be in the middle of the whole application

So there is one problem: the logical location of components and DOM The position is not in 1

According to the previous Vue2 The practice, 1 is generally used position: fixed ; Such as CSS attribute forcibly locates the dialog box to the middle position of the application, which belongs to the method without any method, as shown below teleport The basic usage of.

1. Usage of Teleport

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

//  Render to body Under the label 
<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


Take one step forward

2. Complete the modal dialog box 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"> Shut down </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 you use it, you only need to

<t-dialog title="LGD Is invincible " :visible="visible" @close="onClose">  This is 1 Paragraph content, bleak fairy shell.  </t-dialog>

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

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

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

One step further

3. Rendering of components

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

In the above example, we always put TDialog Component is written where it is used, but this Messgae Component, we call it out when we want to prompt, using an js statement, similar to the following

//  Exhale 1 A hint 
Message({ message: ' This is 1 Article Message Message ' });

If you want to use a function to call out, we need to prepare this function, which is used to complete the rendering of components.

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

MessageConstructor What is it? 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

Summary: