Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the teleport of vue3 by vue2". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to realize the teleport of vue3 by vue2".

Implementing teleport of vue3 by vue2

Multiple teleport on the same target is not supported (code can be achieved through v-if)

module

Export default {name: 'teleport', props: {/ * to which tag It is best to use id * / to: {type: String, required: true}}, mounted () {document.querySelector (this.to) .appendChild (this.$el)}, destroyed () {document.querySelector (this.to) .removeChild (this.$el)} Render () {return {this.$scopedSlots.default ()}

Use

Current component reference {{msg}} vue3 New feature teleport introduces what teleport is

Teleport is a technology that can move our templates to a location other than Vue app in DOM.

If we were nested inside a component of Vue, it would be difficult to deal with the positioning, z-index, and styling of nested components.

The problem of css level between components can be easily solved by using Teleport.

How to use teleport

To use teleport, we first add an element to the page, and we move the modal content to the page

Here's an example.

/ / index.html...

We wrap the modal content in the teleport component, and we also need to specify a to attribute and assign a query selector to that attribute to identify the target element, in this case # modal-wrapper

/ / App.vue Open modal

Hello, I'm a modal window.

Anything in the teleport will be rendered in the target element

At this point, I believe you have a deeper understanding of "vue2 how to achieve the teleport of vue3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.