Vue3值得关注的新特性之一——teleport
时间：2023-03-12 05:48:18
科技观察
premiseVue鼓励我们通过将UI和相关行为封装到组件中来构建UI。我们可以将它们相互嵌套以构建组成应用程序UI的树。然而，有时组件模板的一部分在逻辑上属于该组件，从技术角度来看，最好将模板的这一部分移动到Vue应用程序之外的DOM中的其他位置。Teleport提供了一种简洁的方式，让我们可以控制DOM中的哪个父节点渲染HTML，而无需求助于全局状态或将其拆分为两个组件。app.component('modal-button',{template:`Openfullscreenmodal!(Withteleport!)I'mateleportedmodal!(Myparentis"body")关闭
`,数据(){return{modalOpen:false}}})与Vue组件一起使用如果
包含一个Vue组件，它仍然是父组件的逻辑子组件：constapp=Vue.createApp({template:`Rootinstance
`})app.component('parent-component',{template:`Thisaparentcomponent
`})app.component('child-component',{props:['name'],template:`你好，{{name}}
`})在这种情况下，即使子组件在不同的地方渲染，它仍然是父组件的子集，并且会从nameprop这也意味着从父组件的注入按预期工作，子组件将嵌套在VueDevtools中的父组件下，部署放置在实际内容移动到的地方。在同一个目标上使用多个传送一个常见的用例场景是可重用的组件，它可能同时有多个活动实例。对于这种情况，多个组件可以将它们的内容挂载到同一个目标元素。该顺序将是一个简单的追加-稍后的安装将在目标元素中较早的安装之后进行。A
B
A
B
