useTemplateRef در vue 3.5
توی vue اگر میخواستیم یک ref برای یک کامپوننت تعریف کنیم، باید یک متغیر از نوع ref تعریف میکردیم و به کامپوننت مون اسم اون متغیر رو به عنوان پراپرتی ref بهش پاس میدادیم، مثلا:
<script setup>import { ref, onMounted } from 'vue'const list = ref([ /* ... */])const itemRefs = ref([])onMounted(() => console.log(itemRefs.value))</script><template> <ul> <li v-for="item in list" ref="itemRefs"> {{ item }} </li> </ul></template>از نسخه ی 3.5 یک پراپرتی جدید به نام useTemplateRef در اختیارمون قرار گرفته که میتونیم برای این کار ازش استفاده کنیم:
<script setup>import { useTemplateRef, onMounted } from 'vue'// the first argument must match the ref value in the templateconst input = useTemplateRef('my-input')onMounted(() => { input.value.focus()})</script><template> <input ref="my-input" /></template>توی هر دوی این روش باید حواستون به این نکته باشه که ما بعد از این که کامپوننت مون mount شد میتونیم به رفرنس child ها مون دسترسی داشته باشیم و قبل از اون مقدار null خواهند داشت، پس یا باید عملیات مون رو داخل onMounted انجام بدیم و یا اگر از watch استفاده می کنیم باید قبلش چک کنیم که null نباشه.
برای این که حالت آرایه هم داشته باشه میتونیم این اینجوری پیاده سازی کنیم:
<script setup>import { ref, useTemplateRef, onMounted } from 'vue'const list = ref([ /* ... */])const itemRefs = useTemplateRef('items')onMounted(() => console.log(itemRefs.value))</script><template> <ul> <li v-for="item in list" ref="items"> {{ item }} </li> </ul></template>منبع: