Vue3.0种中新增的teleport和suspence标签

teleport标签

我们通过vue创建的项目，最终的html文件，只会有aap那个div标签，所有组件都是基于这个div显示。然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。

这个标签可以指定将标签内的元素添加到指定位置。

用法：

 

        //想要添加的内容

 比如在index.html中，app那个div外添加元素节点，我们先手动创建一个app2的div。

App.vue代码：指定向app2添加内容

     
 
   
  
 fallback这个插槽的内容为组件异步加载过程中显示的内容，default这个为组件MyChild异步加载成功时显示的内容。
 
  
我们在template模板中，写上上述代码后，需要在setup钩子环境中导入这个MyChild组件，
 
  
代码：