$attrs ($attrs)
آبجکت «$attrs» یعنی جایی که «صفات عبوری (Fallthrough Attributes)» ذخیره می شوند. صفات عبوری، همان ویژگی های غیرِپراپ هستند که روی تگِ کامپوننت می نویسیم. سپس این صفات، به یک عنصرِ داخل کامپوننت می رسند. مثل برچسب های کیف که از بیرون می آیند، اما روی جیب داخلی می چسبند.
تعریف و کاربرد $attrs
$attrs نماینده صفات عبوری و شنونده های رویداد روی تگ کامپوننت است. با v-bind="$attrs" می گوییم این صفات و رویدادها به کدام عنصر برسند. این آبجکت «فقط خواندنی» است. اگر چند ریشه داریم، با $attrs مشخص می کنیم کدام عنصر صفات را بگیرد.
نمونه ساده: انتقال صفات به یک تگ
در این نمونه، صفت هایی مثل id یا title که روی تگِ کامپوننت نوشته شده اند، به تگ <p> می رسند.
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
</template>
دیدن محتویات $attrs داخل کامپوننت
می توانیم مقدار $attrs را ببینیم و در صفحه نمایش دهیم. این کار برای رفع اشکال خیلی کمک می کند.
<template>
<h3>Tigers</h3>
<img src="/img_tiger_small.jpg" alt="tiger">
<p v-bind="$attrs">Tigers eat meat and not plants, so they are called carnivores.</p>
<hr>
<p><strong>Below is the content of the $attrs object:</strong></p>
<pre>{{ attrsObject }}</pre>
</template>
<script>
export default {
data() {
return {
attrsObject: null
};
},
mounted() {
console.log(this.$attrs);
this.attrsObject = this.$attrs;
}
};
<\/script>
<style>
#pink {
background-color: pink;
border-radius: 15px;
padding: 10px;
}
img {
width: 100%;
border-radius: 15px;
}
<\/style>
گرفتن رویداد از والد با $attrs
می توانیم شنونده رویداد را از والد بگیریم. اینجا کلیک روی تصویر، از بیرون منتقل می شود.
<template>
<h3>Toggle Image Size</h3>
<p>Click the image to toggle the image size.</p>
<img v-bind="$attrs" src="/img_tiger_small.jpg" class="imgSmall">
</template>
<style>
.imgSmall {
width: 60%;
}
.imgLarge {
width: 100%;
}
img {
border-radius: 15px;
cursor: pointer;
}
<\/style>
گام های عملی
- صفاتِ غیرپراپ را روی تگِ کامپوننت بنویس.
- در عنصرِ هدف،
v-bind="$attrs"را اضافه کن. - در صورت چند ریشه، عنصرِ درست را انتخاب کن.
نکته: $attrs فقط خواندنی است؛ تغییرش نده. ابتدا منبعِ داده را اصلاح کن.
هشدار: اگر پراپ هم نام باشد، دیگر در $attrs نیست. پس نام ها را با دقت انتخاب کن.
پیوندهای داخلی
برای قالب بندی چندعنصری به عنصر <template> رجوع کن. همچنین بخش آبجکت $attrs در «نمونه کامپوننت» ارتباط ها را بهتر نشان می دهد.
جمع بندی سریع
- $attrs صفات عبوری و رویدادها را نگه می دارد.
- با v-bind="$attrs" عنصرِ هدف را تغذیه کن.
- $attrs فقط خواندنی است؛ منبع را تغییر بده.
- پراپ ها از $attrs حذف می شوند.