vue3中新增的两个方法

最新推荐文章于 2024-05-23 17:34:08 发布

前端——散人柚

最新推荐文章于 2024-05-23 17:34:08 发布

阅读量195

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/a13213766526/article/details/127682144

版权

vue3中新增组件

teleport ：任意门

作用：teleport 是一种能够将我们的模板移动到DOM中Vue app之外的其他位置的技术。
解决问题：如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用Teleport 就可以方便的解决组件间 css 层级问题。
注意：在指定to的节点时，要保证添加到的节点已经渲染完成，多个teleport按顺序渲染在目标组件下。

<teleport to="body">    //to后面跟父组件名称或id
    <p>hello world</p>
</teleport>

suspense：分支

作用：替代v-if和v-else，并给异步操作加上效果
应用：在页面加载之前显示加载动画、显示占位符内容、处理延迟加载的图像等

<suspense>
    <template #default>
        <suspenseDemo />    //异步组件
    </template>
    <template #default>
       <div>加载中...</div>
    </template>
</suspense>