dịch chuyển tức thời
Thẻ Vue <Teleport>
được sử dụng để di chuyển nội dung đến một vị trí khác trong cấu trúc DOM.
<Dịch chuyển> và Thuộc tính 'đến'
Để di chuyển một số nội dung đến một nơi khác trong cấu trúc DOM, chúng tôi sử dụng thẻ Vue <Teleport>
xung quanh nội dung và thuộc tính 'to' để xác định vị trí di chuyển nội dung đó.
<Teleport to="body">
<p>Hello!</p>
</Teleport>
Giá trị thuộc tính 'to' được đưa ra dưới dạng ký hiệu CSS, vì vậy nếu chúng ta muốn gửi một số nội dung đến thẻ body như trong đoạn mã trên, chúng ta chỉ cần viết <Teleport to="body">
.
Chúng ta có thể thấy rằng nội dung được chuyển đến thẻ body bằng cách kiểm tra trang sau khi nó được tải.
Ví dụ
CompOne.vue
:
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<Teleport to="body">
<div id="redDiv">Hello!</div>
</Teleport>
</div>
</template>
Chạy ví dụ » Nếu chúng ta nhấp chuột phải vào trang của mình và chọn 'Kiểm tra', chúng ta có thể thấy phần tử <div>
màu đỏ được di chuyển ra khỏi thành phần và đến cuối thẻ <body>
.
Ví dụ: chúng tôi cũng có thể có thẻ có id <div id="receivingDiv">
và dịch chuyển một số nội dung đến <div>
đó bằng cách sử dụng <Teleport to="#receivingDiv">
xung quanh nội dung mà chúng tôi muốn dịch chuyển/di chuyển.
Kịch bản và phong cách của các yếu tố được dịch chuyển
Mặc dù một số nội dung được di chuyển ra khỏi thành phần bằng thẻ <Teleport>
, 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.
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ụ »