Weekly Vue News #118 - Accessing Template Ref in Child Component

Weekly Vue News #118 - Accessing Template Ref in Child Component

十一月 06, 2023

View and discuss online,

Weekly Vue News #118

Accessing Template Ref in Child Component

Hi 👋

I'm making good progress on the new editor of CodeSnap.dev. I hope to ship it before end of the year 🤞🏻.

Have a lovely week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Vue

📕 Why I chose Vue over React

👉🏻 The author explains why he chose the best frontend framework available.

📕 How we migrated our Vue 2 enterprise project to Vue 3

👉🏻 How a team migrated a Vue enterprise project from Vue 2 to Vue 3 step-by-step without getting blocked from releasing new features.

dbsystel.github.io

📕 Benefits of using Pinia as your Vue.js state management solution

👉🏻 This article explores the benefits of choosing Pinia as your Vue.js state management solution.

masteringpinia.com

📕 Vueform is Now Open-Source 🔥

👉🏻 Vueform has become open-source and available on GitHub under MIT license, including all its elements and features.

Nuxt

Nuxt UI Pro is out ✨

Nuxt UI Pro is out ✨

UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.

It's free in development to try it out 💚

📹 Is your content actually server-rendered!?

👉🏻 In this video, you'll learn a dead simple technique to verify if content was rendered on the server.

www.youtube.com

📹 Nuxt Modules Course

👉🏻 You should watch this video if you would like to build a Nuxt module.

📅 Events

VueConf Toronto 2023

👉🏻 9 - 10 November 2023, Toronto, Canada

👉🏻 Checkout the full program at http://vuetoronto.com/schedule.

www.vuetoronto.com

👉🏻 10 November 20230, Verona

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

💬 Quote of the week

Quote of the week

🔥 Vue Tip: Accessing Template Ref in Child Component

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:

😂 Fun

Fixing bug in production

🧑🏻‍💻 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.

📕 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.

👉🏻 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.

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via

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

评论