Vue3.0 teleport

一、Teleport

teleport解决了一个包含全屏模式的组件,逻辑存在于组件中,该组件的快速定位可以通过css来解决。teleport提供了一种干净的方法,允许我们控制在 DOM 中哪个父节点下渲染了 HTML,而不必求助于全局状态或将其拆分为两个组件。以下是我们修改 modal-button 以使用 ,并告诉 Vue “Teleport 这个 HTML 到该‘body’标签”。

页面效果如下:

Vue3.0 teleport_第1张图片

以下是modal-button的组件代码




以上是teleport使用场景的演示,希望对您有帮助!

你可能感兴趣的:(前端vue.js)