Home >Web Front-end >JS Tutorial >Building a Production Stack: Docker, Meilisearch, NGINX & NestJS
If you're used to Vue 2, you might remember that every component's template needed a single root element. In Vue 3, that's no longer necessary because of fragments. This means your components can now have multiple root elements without needing a wrapper.
<!-- Vue 2 --> <template> <div> <!-- wrapper ? --> <h1>My Blog Post</h1> <ArticleComponent>{{ content }}</ArticleComponent> </div> </template> <!-- Vue 3 --> <template> <h1>My Blog Post</h1> <ArticleComponent>{{ content }}</ArticleComponent> </template>
That's very similar to Fragment in React. However, Vue handles fragments behind the scenes. In fact, in Vue 3, you can think of the tag as a fragment.
In Vue 2, we could easily set a ref on a child component, and it would refer to both the wrapper element and the component instance.
But in Vue 3, when there’s no wrapper element, what does the ref refer to? ?
If the child component uses the Options API or doesn't use , the ref will point to the child component's this, giving the parent full access to its properties and methods.
What if we use ?
Components using are private by default. To expose properties, we need to use the defineExpose macro.
<!-- Child --> <template> <div>
<!-- Child --> <template> <h1>My Blog Post</h1> <!-- Root 1 --> <ArticleComponent>{{ content }}</ArticleComponent> <!-- Root 2 --> </template> <!-- Parent --> <script setup lang="ts"> const childRef = ref() onMounted(()=>{ console.log(childRef.value.$el); // #text }) </script> <template> <Child ref="childRef" /> </template>
Wait, what, what happened?
When we using Fragment(multiple nodes), Vue creates a text node that wraps our child component root nodes.
When using Fragments in Vue 3, Vue inserts an empty text node at the beginning of the component as a marker, which is why $el returns a #text node.
#text is like a reference point that Vue uses internally.
Also I should mention that you have still access to component instance (if you don't use