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

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

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

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

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



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




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

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

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

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



 
 
 
 
 
 <%= htmlWebpackPlugin.options.title %>
 
 
 
 

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

vue3 Teleport瞬间移动函数使用方法详解_第1张图片

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

你可能感兴趣的:(vue3 Teleport瞬间移动函数使用方法详解)