Vue3 Teleport瞬间移动函数如何实现跨组件的动态位置传送？
- 内容介绍
- 文章标签
- 相关推荐
本文共计883个文字，预计阅读时间需要4分钟。
Vue3 Teleport 瞬移函数的应用，提供参考，内容如下：
Teleport 是 Vue3 中一个强大的功能，它可以将一个组件的 DOM 节点移动到页面的其他位置。通常，Teleport 被翻译成瞬移组件，但实际上理解成独立组件更为贴切。它可以将你写的组件悬浮挂载到任何你想要的位置。
例如，Teleport 可以将一个组件悬浮挂载到页面的任意角落，就像你可以在任何地方挂载一个对话框一样。
vue3 Teleport瞬间移动函数的使用，供大家参考，具体内容如下
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>
在app.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上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
使用的时候 to属性可以确定想要挂载的DOM节点下面
<template> <teleport to="#modal"> <div id="center"> <h2>柏特better</h2> </div> </teleport> </template>
在public文件夹下的index.html中增加一个节点
<!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组件的影响了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
本文共计883个文字，预计阅读时间需要4分钟。
Vue3 Teleport 瞬移函数的应用，提供参考，内容如下：
Teleport 是 Vue3 中一个强大的功能，它可以将一个组件的 DOM 节点移动到页面的其他位置。通常，Teleport 被翻译成瞬移组件，但实际上理解成独立组件更为贴切。它可以将你写的组件悬浮挂载到任何你想要的位置。
例如，Teleport 可以将一个组件悬浮挂载到页面的任意角落，就像你可以在任何地方挂载一个对话框一样。
vue3 Teleport瞬间移动函数的使用，供大家参考，具体内容如下
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>
在app.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上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
使用的时候 to属性可以确定想要挂载的DOM节点下面
<template> <teleport to="#modal"> <div id="center"> <h2>柏特better</h2> </div> </teleport> </template>
在public文件夹下的index.html中增加一个节点
<!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组件的影响了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。