16.0 vue3 Teleport---自定义dialog组件

上一篇：

15.0 vue3 provide&inject跨组件通信方式_十一月的萧邦-CSDN博客上一篇：14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇：vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef，customRef是vue3的一大亮点，custom的意思大家都懂，自定义的意思，一旦出现自定义，那么就代表我们可以做很多基于自己的需求的操作，vue3的官方文档的关于这块的示例其实已经蛮不错了，看代码需求是这样，我们需https://blog.csdn.net/qq_42543244/article/details/122869521本篇记录vue3中新标签 Teleport标签，并且来封装一个dialog组件，最后呈现效果：

dialog组件内将会有之前记录学习的知识内容，props传值，slot的使用，refs的调用方式以及Teleport标签等等

 文件目录：

 App.vue

Child.vue

Son.vue

MyDialog.vue

可能还会有人疑惑，Teleport标签到底有什么用？请看下图

去掉teleport标签对，审查元素，看看弹出框的位置

可以看出来dialog元素在引用的父组件下，但是这样带来的效果并不是很好，比如会被父组件中的某些css样式影响到，在elementui的dialog组件中我们会见到这两个属性 

在vue3中我们利用teleport可以轻易的达到此目的，请看加上teleport后，dialog组件已经和app处于同级关系

 结束！！！