ویژگی های توکار (Built-in Attributes)
در Vue چند «ویژگی توکار» وجود دارد. این ویژگی ها مستقیم روی تگ ها می آیند. «is»، «key» و «ref» هرکدام کار مشخصی دارند. سپس با مثال های خیلی ساده می بینیم چه می کنند.
مرور سریع ویژگی های توکار
is (ایز): کامپوننت پویا را تعیین می کند. یعنی الان کدام کامپوننت فعال است.
key (کی): برای آیتم های تکراری با v-for یک شناسه یکتا می دهد.
ref (رف): به یک عنصر اشاره گر می دهد تا بعداً در اسکریپت دستکاری شود.
نمونه استفاده از is برای کامپوننت پویا
<template>
<component :is="activeComp"></component>
</template>
<script setup>
import { ref } from 'vue';
const activeComp = ref('comp-one');
<\/script>
نکته: با تغییر مقدار activeComp بین نام کامپوننت ها جابه جا می شوید.
نمونه استفاده از key در v-for
<template>
<ol>
<li v-for="x in products" :key="x">
{{ x }}
</li>
</ol>
</template>
<script setup>
import { ref } from 'vue';
const products = ref(['Apple', 'Pizza', 'Rice']);
<\/script>
هشدار: مقدار key باید یکتا باشد؛ تکراری باعث باگ می شود.
نمونه استفاده از ref برای دسترسی به DOM
<template>
<input ref="inp" placeholder="Focus me">
<button @click="focusIt">Focus</button>
</template>
<script setup>
import { ref } from 'vue';
const inp = ref(null);
function focusIt() {
if (inp.value) {
inp.value.focus();
}
}
<\/script>
گام های عملی
- نیاز را مشخص کن: پویا، لیست، یا دسترسی DOM.
- اگر پویا است، از
isاستفاده کن. - اگر لیست است، برای هر آیتم
keyیکتا بده. - اگر DOM لازم است، عنصر را با
refبگیر.
جمع بندی سریع
isکامپوننت فعال را تعیین می کند.keyدرv-forباید یکتا باشد.refدسترسی مستقیم به عنصر می دهد.- همیشه ساده و خوانا کدنویسی کن.
مطالب مرتبط: Composition API (Composition API)