DEV Community
·
构建生产环境栈：Docker、Meilisearch、NGINX 和 NestJS
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
Vue 3 允许组件有多个根元素，无需包装。使用 ref 时，若无包装，ref 指向子组件实例。使用 <script setup> 时，需用 defineExpose 暴露属性。Vue 3 的 Fragment 会在组件前插入空文本节点，导致 $el 返回 #text。解决方案包括使用单根元素或结合模板引用和 defineExpose。
🎯
关键要点
- Vue 3 允许组件有多个根元素，无需包装。
- 使用 ref 时，若无包装，ref 指向子组件实例。
- 使用 <script setup> 时，需用 defineExpose 暴露属性。
- Vue 3 的 Fragment 会在组件前插入空文本节点，导致 $el 返回 #text。
- 解决方案包括使用单根元素或结合模板引用和 defineExpose。
❓
延伸问答
Vue 3 中组件可以有多少个根元素？
Vue 3 中组件可以有多个根元素，无需包装。
在 Vue 3 中，如何使用 ref 获取子组件的实例？
在 Vue 3 中，如果没有包装元素，ref 将指向子组件的实例。
使用 <script setup> 时，如何暴露子组件的属性？
使用 <script setup> 时，需要使用 defineExpose 来暴露属性。
Vue 3 的 Fragment 会导致什么问题？
Vue 3 的 Fragment 会在组件前插入空文本节点，导致 $el 返回 #text。
如何解决 Vue 3 中 Fragment 导致的 $el 返回 #text 的问题？
可以使用单根元素或结合模板引用和 defineExpose 来解决这个问题。
在 Vue 3 中，如何访问子组件的元素？
可以通过使用 ref 和 defineExpose 来访问子组件的元素。
➡️
