First of all, Vue3's Teleport is a magical function that allows your components to move to another location instantly! Just like the teleporter in real life, but it only applies to Vue3~
You may be thinking, isn’t this similar to Vue2’s slot? NO NO NO, you are wrong! Teleport is different from slots, it is more flexible and mysterious!
You see, in Vue3, you can use Teleport to "teleport" a component from one location to another, say, you have a parent component with multiple child components, and you want to teleport one of the child components to Another location, then you can use Teleport to achieve it!
Sounds amazing, right? Next, let me give you a few examples!
Example 1: Transport a child component to another location
First, we create a parent component that contains two child components:
<template>
<div>
<h1>父组件</h1>
<Teleport to="app">
<ChildComponent />
</Teleport>
<Teleport to="app">
<ChildComponent />
</Teleport>
</div>
</template>
<script>
import {
defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default defineComponent({
components: {
ChildComponent
}
})
</script>
In this example, we created a Vue component called "Parent Component" and used two Teleport components in it. Each Teleport component contains a child component (ChildComponent) and sends them to the same location (to="app").
Next, we need to add a target component to the Vue instance that can receive these transferred subcomponents:
<template>
<div>
<h1>App</h1>
<div v-for="child in children" :key="child.id">
{
{ child.name }}
</div>
</div>
</template>
<script>
import {
defineComponent } from 'vue'
export default defineComponent({
data() {
return {
children: []
}
},
mounted() {
this.$teleport.startListening()
},
beforeDestroy() {
this.$teleport.stopListening()
}
})
</script>
In this example, we created a Vue component called "App" and used a data property called "children" in it to store all the passed child components. We use Vue's $teleport API to listen for these teleported child components and store them in the "children" array. We then use the v-for directive to render all child components onto the page.
Next, we need to add the Teleport plugin to the Vue instance and specify the App component as the target component to receive the transferred child component:
import {
createApp } from 'vue'
import App from './App.vue'
import {
TeleportPlugin } from 'vue'
const app = createApp(App)
app.use(TeleportPlugin({
target: app }))
app.mount('#app')
In this example, we use Vue's createApp function to create a new Vue instance and bind it to the Vue instance using the TeleportPlugin. We specify the App component as the target component to receive the passed child component, and mount the Vue instance to a div element with the id "app".
Example 2: Using dynamic components
Next, let's take a look at how to use dynamic components to deliver child components. In this example, we will create a parent component with multiple child components, and use dynamic components to transfer one of the child components to another location.
<template>
<div>
<h1>父组件</h1>
<Teleport to="app">
<template v-if="component === 'a'">
<ChildComponentA />
</template>
<template v-else-if="component === 'b'">
<ChildComponentB />
</template>
<template v-else>
<div>未知组件</div>
</template>
</Teleport>
</div>
</template>
<script>
import {
defineComponent } from 'vue'
import ChildComponentA from './ChildComponentA.vue'
import ChildComponentB from './ChildComponentB.vue'
export default defineComponent({
components: {
ChildComponentA,
ChildComponentB
},
data() {
return {
component: 'a'
}
},
methods: {
switchComponent() {
this.component = 'b'
}
}
})
</script>
In this example, we create a Vue component called "Parent Component". It contains a Teleport component, which is used to transfer sub-components to the target component. We use v-if, v-else-if and v-else directives to dynamically render different child components based on conditions. When the component attribute is "a", render the ChildComponentA component; when the component attribute is "b", render the ChildComponentB component; otherwise, render a prompt message. We also define a method called "switchComponent" to switch the type of subcomponent.