这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
对于
Vue3, 已经发布有一段时间了, 有许多新的特性还是值得学习的. 也断断续续探索过, 学习过, 但不是太系统, 也没有总结, 这里做一些学习的总结, 记录 && 积累!
之前有几篇文章有作总结的开始: 对于 Vue3进行了初体验, 以及 Vue3 生命周期 和 setup()函数 以及 computed & watch 的具体使用. 本文继续来学习: 一个 Vue3 的新特性: Teleport
Teleport
Teleport 英文文档地址: v3.vuejs.org/guide/telep…
当然还是有点看不懂的!, 可以来看中文文档了:
Teleport 中文文档地址: v3.cn.vuejs.org/guide/telep…
Teleport 是什么?
Teleport 翻译为 传送/ 远距离传送, 在这里我们可以理解为 多层穿透挂载, 还不理解? 请继续往下看
在 Vue2 及较前版本中, 我们通常在 index.html 中写一个节点, 其 id 为 App, 然后这样的结果就是 所有的组件节点都挂载在这个根节点上面.
而一些组件(如提示框等)在显示几秒后就消失了, 对应组件也就destroyed销毁了, 这样的写法可能导致消息弹框组件受到父节点的影响
由此 Vue3 新添加了一个默认的组件就叫 Teleport, 可以直接拿过来使用, 它暴露出一个 to 的属性, 并且它接受一个 css query selector 作为参数, 这个选择器参数就是代表要把这个组件渲染到哪个 dom 元素中.
Teleport 小试牛刀
来个最简单的小栗子:
/// index.html > div#App
<!-- 渲染结果: -->
<div id="App">
<!-- 原来所有的页面组件都会渲染到这 #App 标签内部, 不论你嵌套有多深,... -->
</div>
<div id="modals">
<div>
这里就是 渲染到 #modals 的 Teleport组件 的内容了:: 这是一个 Teleport 组件, 指定id选择器后,
将会渲染挂载到 `#modals`标签上面
</div>
</div>
/// Teleport 组件的内容:
<!-- 写一个 Teleport 组件 -->
<teleport to="#modals">
<div>这是一个 Teleport 组件, 指定id选择器后, 将会渲染挂载到 `#modals`标签上面</div>
</teleport>
当然一个标签上还可以挂载多个 teleport组件, 渲染后同 #App可包含可多内容.
