Vue — ویژگی 'ref' ('ref' Attribute)

آخرین بروزرسانی: 1404/08/21

قبلی: ویژگی 'key' ('key' Attribute) بعدی: کامپوننت های توکار (Built-in Components)

ویژگی 'ref' ('ref' Attribute)

ویژگی ref در Vue مثل «برچسب نام» است. بنابراین هر عنصر را سریع پیدا می کنیم. سپس با شیء $refs به آن دسترسی می گیریم. این شبیه querySelector در جاوااسکریپت است، اما ساده تر داخل Vue.

تعریف و کاربرد ویژگی ref

ویژگی ref روی عناصر <template> قرار می گیرد. آنگاه همان نام در شیء $refs قابل دسترسی است. بنابراین می توانیم متن، مقدار یا استایل عنصر را تغییر دهیم.

نمونه: تغییر متن یک پاراگراف با $refs

&lt;template&gt;
  &lt;h1&gt;Example&lt;/h1&gt;
  &lt;button @click="changeVal"&gt;Change Text&lt;/button&gt;
  &lt;p ref="pEl" id="pEl"&gt;This is the initial text&lt;/p&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    methods: {
      changeVal() {
        this.$refs.pEl.innerHTML = "Hello!";
      }
    }
  };
&lt;/script&gt;

مشاهده در ادیتور

نکته: نام ref باید یکتا باشد. زیرا با نام تکراری، دسترسی سخت می شود.

ref در تکرار با v-for

اگر روی عناصر تکراری ref بگذاریم، در $refs به صورت آرایه ذخیره می شوند. سپس با ایندکس، هر کدام را می گیریم.

&lt;ul&gt;
  &lt;li v-for="x in liTexts" ref="liEl"&gt;{{ x }}&lt;/li&gt;
&lt;/ul&gt;

مشاهده در ادیتور

گام های سریع عملی

روی عنصر، یک ref کوتاه بگذار.
در متد، از this.$refs.name استفاده کن.
ویژگی دلخواه را تغییر بده؛ مثلاً innerHTML.

هشدار: از ref برای هر کاری استفاده نکن. ابتدا سراغ «داده واکنشی» و «بایندینگ» برو. سپس اگر لازم بود، ref را به کار ببر.

جمع بندی سریع

ref برچسب نام برای عنصر است.
$refs دسترسی مستقیم می دهد.
در v-for، آرایه از $refs می گیری.
اولویت با داده واکنشی است.

ادامه مرتبط: راهنمای ویژگی های توکار، ویژگی key، و ویژگی is. همچنین از همین صفحه به عنوان مرجع «ویژگی ref» استفاده کن.