Detailed usage of Teleport, a built-in component of Vue3

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

Sometimes part of a component template logically belongs to the component, and from a technical point of view, it is better to move this part of the template to a location other than the Vue app in the DOM

Scenario example: a Button , click to call out the modal dialog box

The business logic position of this modal dialog must belong to this Button , but according to the DOM structure, the actual position of the modal dialog should be in the middle of the entire application

So there is a problem: the logical position of the component and the DOM position are not together

According to the previous Vue2 , it is generally to use position: fixed; to force the dialog box to the middle position of the application. There is no way. The following shows the basic usage teleport

usage

The usage is very simple, you only need to use to to render the component to the desired position

// 渲染到body标签下
<teleport to="body">
  <div class="modal">
    I'm a teleported modal! 
  </div>
</teleport>

Can also be used

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

Must be a valid query selector or HTMLElement

further

Now we come to encapsulate a standard modal dialog

<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">关闭</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, you only need

<t-dialog title="LGD是不可战胜的" :visible="visible" @close="onClose"> 这是一段内容，萧瑟仙贝。 </t-dialog>

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

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

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

Go further

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

In the above example, 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, similar to the following

// 呼出一个提示
Message({ message: '这是一条Message消息' });

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

const Message = options => {
  // 准备渲染容器
  const container = document.createElement('div');
  // 生成vnode
  const vnode = createVNode(MessageConstructor, options);
  // 渲染
  render(vnode, container);
};

MessageConstructor is 0616f7832d5ff0? 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 teleport component, which provides us with a lot of convenience.