vue 3 Teleport瞬間移動関数の使い方詳細
vue 3 Teleport瞬間移動関数の使用は、以下の通りです。
Teleportは普通瞬間移動部品に訳されていますが、実はよく分かりません。彼を「独立組立品」と理解しています。
彼はあなたが書いたコンポーネントを任意のDOMにマウントできます。だから自由で独立しています。
例をあげてみますと、パチンコのセットを作ります。
そこで生じた問題
1.modalは他のコンポーネントに包まれ、干渉されやすい。
2.スタイルも他のコンポーネントの中にあります。非常に混乱しやすいです。
Teleportはmodalコンポーネントを任意のレンダリングしたい外部Domにレンダリングすることができます。これによりお互いに邪魔しなくてもいいです。Teleportをトランスポートゲートと見なして、あなたのコンポーネントをどこにでも送ります。
使用時to属性はマウントしたいDOMノードの下に確定できます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
Teleportは普通瞬間移動部品に訳されていますが、実はよく分かりません。彼を「独立組立品」と理解しています。
彼はあなたが書いたコンポーネントを任意のDOMにマウントできます。だから自由で独立しています。
例をあげてみますと、パチンコのセットを作ります。
<template>
<teleport to="#modal">
<div id="center" v-if="isOpen">
<h2><slot>this is a modal</slot></h2>
<button @click="buttonClick">Close</button>
</div>
</teleport>
</template>
<script lang="ts">
export default {
props: {
isOpen: Boolean,
},
emits: {
'close-modal': null
},
setup(props, context) {
const buttonClick = () => {
context.emit('close-modal')
}
return {
buttonClick
}
}
}
</script>
<style>
#center {
width: 200px;
height: 200px;
border: 2px solid black;
background: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
ap.vueで使うときは、普通のコンポーネントと同じです。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<HooksDemo></HooksDemo>
<button @click="openModal">Open Modal</button><br/>
<modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import HooksDemo from './components/HooksDemo.vue'
import Modal from './components/Modal.vue'
import{ref} from 'vue'
export default {
name: 'App',
components: {
HelloWorld,
HooksDemo,
Modal
},
setup() {
const modalIsOpen = ref(false)
const openModal = () => {
modalIsOpen.value = true
}
const onModalClose = () => {
modalIsOpen.value = false
}
return {
modalIsOpen,
openModal,
onModalClose
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
app.vueファイルで使用する場合、modalはappのDOMノードの下にあり、親ノードのdom構造とcssはmodalに影響を与えます。そこで生じた問題
1.modalは他のコンポーネントに包まれ、干渉されやすい。
2.スタイルも他のコンポーネントの中にあります。非常に混乱しやすいです。
Teleportはmodalコンポーネントを任意のレンダリングしたい外部Domにレンダリングすることができます。これによりお互いに邪魔しなくてもいいです。Teleportをトランスポートゲートと見なして、あなたのコンポーネントをどこにでも送ります。
使用時to属性はマウントしたいDOMノードの下に確定できます。
<template>
<teleport to="#modal">
<div id="center">
<h2> better</h2>
</div>
</teleport>
</template>
publicフォルダの下のindex.にノードを追加します。
<!DOCTYPE html>
<html lang="en">
<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="modal"></div>
<!-- built files will be auto injected -->
</body>
</html>
このようにmodalのコンポーネントを見ることができます。appの下にマウントされていません。もうappのコンポーネントの影響を受けません。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。