新的组件

Fragment

Fragment中文译为碎片，片段的意思

它是Vue3提供的新组件，它使用起来特别的简单，简单到不需要写代码

大家都知道，在Vue2中组件必须要有根标签，但是在Vue3中组件可以不需要根标签，这是因为Vue3中内部把组件中写的多个标签包含在一个Fragment虚拟元素中，并且这个虚拟元素是不参与渲染的

通过Vue开发者工具可以看到，确实是把这三个标签写在Fragment里面了，并且在页面上Fragment是隐藏的

Fragment总结

在Vue2中: 组件必须有一个根标签
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
好处: 减少标签层级, 减小内存占用

Teleport

Teleport译为瞬间移动，传送的意思，能够将我们的组件html结构移动到指定位置的技术。

下面通过一个场景演示出来Teleport的作用，做好是多个组件才能演示出Teleport的作用和问题

这里我准备一个三层组件

接下来想实现一个功能：在son组件里面想使用一个弹窗组件，所以需要先准备一个弹窗组件

准备弹窗组件

这里简单写点内容和样式:

这样一个简陋的弹窗就写完了，接下来就可以引入并使用了

使用弹窗组件

在需要使用弹窗的组件引入使用即可：

这样弹窗就出来了

但是弹窗，需要点击才能出来所以，所以还需要完善下逻辑，可以配置点数据，数据驱动着页面弹窗的显示

这样就能做到点击弹窗展示弹窗，点击关闭弹窗就关闭弹窗了，但是弹窗出来的时候会破坏组件

这时候就可以使用teleport对弹窗进行传送了

使用teleport封装弹窗

我们可以把弹窗的代码放到teleport里面

teleport本质是一个标签，直接写即可，它有一个to属性

to属性

如果to属性写成body的话，就会把弹窗到结构传送到body：

to属性也可以写成html，这样弹窗就会跑到html下面了

这样我们就可以根据不同的元素控制对弹窗进行样式修改，方便控制更容易处理

总结

什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
        <div v-if="isShow" class="mask">
                <div class="dialog">
                        <h3>我是一个弹窗</h3>
                        <button @click="isShow = false">关闭弹窗</button>
                </div>
        </div>
</teleport>

Vue3的一些新的组件