Thành phần Vue <Teleport>
Ví dụ
Sử dụng thành phần <Teleport>
tích hợp để di chuyển phần tử <div>
đến thư mục gốc của <body>
:
<Teleport to="body">
<div id="redDiv">Hello!</div>
</Teleport>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Thành phần <Teleport>
tích hợp được sử dụng với prop to
để di chuyển một phần tử ra khỏi cấu trúc HTML hiện tại và vào một phần tử khác đã được gắn trong DOM.
Để biết rằng một phần tử thực sự đã được di chuyển đến đâu đó bằng thành phần <Teleport>
, bạn có thể cần phải nhấp chuột phải và kiểm tra trang.
Một phần tử được dịch chuyển sẽ kết thúc sau các phần tử khác đã được gắn vào đích. Vì vậy, trong trường hợp có nhiều phần tử được dịch chuyển đến cùng một đích, phần tử cuối cùng được dịch chuyển sẽ ở bên dưới các phần tử được dịch chuyển tức thời khác.
Nếu <Teleport>
được sử dụng để di chuyển một thành phần, giao tiếp đến và đi từ thành phần đó bằng cung cấp/chích hoặc prop/emit vẫn hoạt động như trước, như thể thành phần đó không được di chuyển.
Ngoài ra, nếu một số nội dung được di chuyển ra khỏi một thành phần bằng <Teleport>
, Vue sẽ đảm bảo rằng mã có liên quan bên trong thành phần đó trong thẻ <script>
và <style>
vẫn hoạt động đối với nội dung được di chuyển. Xem ví dụ dưới đây.
đạo cụ
Prop | Description | |
---|---|---|
to | Required. String. Specify the name of the target | Run Example » |
disabled | Optional. Boolean. Specify if the teleport functionality should be disabled | Run Example » |
Thêm ví dụ
Ví dụ
Mã liên quan từ thẻ <style>
và <script>
vẫn hoạt động đối với thẻ <div>
được dịch chuyển ngay cả khi nó không còn bên trong thành phần sau khi biên dịch.
CompOne.vue
:
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<Teleport to="body">
<div
id="redDiv"
@click="toggleVal = !toggleVal"
:style="{ backgroundColor: bgColor }"
>
Hello!<br>
Click me!
</div>
</Teleport>
</div>
</template>
<script>
export default {
data() {
return {
toggleVal: true
}
},
computed: {
bgColor() {
if (this.toggleVal) {
return 'lightpink'
}
else {
return 'lightgreen'
}
}
}
}
</script>
<style scoped>
#redDiv {
margin: 10px;
padding: 10px;
display: inline-block;
}
#redDiv:hover {
cursor: pointer;
}
</style>
Chạy ví dụ »Ví dụ
Prop disabled
boolean được bật bằng một nút để phần tử <div>
có được dịch chuyển tức thời hoặc không.
CompOne.vue
:
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<button @click="teleportOn = !teleportOn">Teleport on/off</button>
<Teleport to="body" :disabled="teleportOn">
<div id="redDiv">Hello!</div>
</Teleport>
</div>
</template>
<script>
export default {
data() {
return {
teleportOn: true
}
}
}
</script>
<style scoped>
#redDiv {
background-color: lightcoral;
margin: 10px;
padding: 10px;
width: 100px;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn Vue: Vue Teleport