Sometimes you need to access a template ref of a nested component. For example, you want to focus an input field in a child component from the parent component.

Let's take a look at how you can do this in Vue 3:

Child.vue


          1 <script setup lang="ts">

          2 import { ref } from 'vue';

          3 

          4 const innerChildRef = ref<HTMLElement | null>(null);

          5 

          6 defineExpose({

          7   innerChildRef,

          8 });

          9 </script>

          10 

          11 <template>

          12   <div ref="innerChildRef">

          13     <!-- child content -->

          14   </div>

          15 </template>

In the child component, we define a template ref called innerChildRef and expose it to the parent component using defineExpose().

Now you can access this template ref in the parent component:

Parent.vue


          1 <script setup lang="ts">

          2 import { ref, onMounted } from 'vue';

          3 

          4 import Child from './components/Child.vue';

          5 

          6 const child = ref(null);

          7 

          8 onMounted(() => {

          9   if (child.value) {

          10     console.log('Inner Child ref', child.value.innerChildRef);

          11   }

          12 });

          13 </script>

          14 

          15 <template>

          16   <Child ref="child" />

          17 </template>

Try it yourself in the following StackBlitz project:

⚡ Open Demo

😂 Fun

🧑🏻‍💻 In Other News

📕 Front End Developer Roadmap

👉🏻 In this article, you'll get a brief overview of the technologies you will learn as part of freeCodeCamp's frontend developer learning path.

www.freecodecamp.org

📕 Hydration, the Saboteur of Lazy Loading

👉🏻 Hydration is often seen as a silver bullet for performance, but there are caveats.

www.builder.io

📕 7 simple habits of the top 1% of engineers

👉🏻 These habits include sticking to a consistent standard of coding, deep domain knowledge in at least one field, being detached from their code, and being more visible.

engineercodex.substack.com

🛠️ PureImage

👉🏻 A browser-like 2D canvas experience in Node but without any native dependencies.

github.com

🛠️ Effect

👉🏻 Effect is a TypeScript library designed to help developers quickly create complex, synchronous, and asynchronous programs.

www.effect.website

🛠️ QX82 Retro JavaScript Engine

👉🏻 A tiny Javascript engine that lets you create games and experiences inspired by the look and feel of a retro 80s computer.

👉🏻 It's open source.

btco.github.io

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via

Facebook

Twitter

Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany