好资源导航 » 文章资讯 » vue3 Teleport瞬间移动函数使用方法详解

vue3 Teleport瞬间移动函数使用方法详解

2023-07-04 17:30:06 93

vue3Teleport瞬间移动函数的使用，供大家参考，具体内容如下

Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件"

他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的

以一个例子来看:编写一个弹窗组件




exportdefault{
props:{
isOpen:Boolean,
},
emits:{
'close-modal':null
},
setup(props,context){
constbuttonClick=()=>{
context.emit('close-modal')
}
return{
buttonClick
}
}
}

在app.vue中使用的时候跟普通组件调用是一样的

要是在app.vue文件中使用的时候,modal是在app的DOM节点之下的,父节点的dom结构和css都会给modal产生影响
于是产生的问题

1.modal被包裹在其它组件之中，容易被干扰
2.样式也在其它组件中，容易变得非常混乱

Teleport可以把modal组件渲染到任意你想渲染的外部Dom上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
使用的时候to属性可以确定想要挂载的DOM节点下面

在public文件夹下的index.html中增加一个节点







favicon.ico">
<%=htmlWebpackPlugin.options.title%>

这样可以看到modal组件就是没有挂载在app下,不再受app组件的影响了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue3 Teleport瞬间移动函数使用方法详解

thisisamodal

柏特better

随机推荐

vue3 Teleport瞬间移动函数使用方法详解

thisisamodal

柏特better

热门推荐

随机推荐