반응형
App.vue
<template>
<div>
<h2>hello Teleport</h2>
<teleport to="#extra-modal" :disabled="isTeleport">
<div class="modal">
this is modal
<button @click="isTeleport = !isTeleport">teleport toggle</button>
</div>
</teleport>
<teleport to="#extra-modal">
<div class="modal2">this is modal2</div>
</teleport>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
isTeleport: true,
};
},
};
</script>
<style scoped>
.modal {
position: fixed;
background: rgba(0, 0, 0, 0.5);
color: #fff;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-size: 36px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<div id="extra-modal"></div>
<!-- built files will be auto injected -->
</body>
</html>원래는 App.vue에 작성하는 모든 내용은
index.html의 id가 app인 div태그로 들어가게 된다.
하지만
텔레포트를 이용하면 App.vue에 있는 내용들을
index.html 에서 id가 app인 div태그 외부로 보낼 수 있다.
'Web > Vue' 카테고리의 다른 글
| [Vue] slot (0) | 2022.06.29 |
|---|---|
| [Vue] Component5 , keep-alive, dynamic component (0) | 2022.06.29 |
| [Vue] Component4, your input is (0) | 2022.06.29 |
| [Vue] Component 3 (0) | 2022.06.29 |
| [Vue] Component 2 (0) | 2022.06.25 |