$data ($data)
آبجکت «$data» یعنی همه داده های بخش «data» در کامپوننت. یعنی همان متغیرها. «متغیر (Variable)» مقداری است که تغییر می کند. مثل نمره ریاضی که بالا و پایین می شود. با $data می فهمانیم که از داده های کامپوننت حرف می زنیم.
تعریف و کاربرد $data
$data نماینده تمام ویژگی های بخش data است. معمولاً مستقیم می نویسیم this.color. اما گاهی باید بگوییم this.$data.color. چون نام با _ یا $ شروع می شود. در این حالت this تنها کار نمی کند.
نمونه: تغییر مقدار با $data در متد
با متد، رنگ را عوض می کنیم. مقدار از داخل $data خوانده و نوشته می شود.
export default {
data() {
return {
color: 'lightgreen'
};
},
methods: {
changeColor() {
this.$data.color = 'pink';
}
}
};
نمونه: استفاده مستقیم از $data در قالب
با هر کلیک، مقدار رنگ تغییر می کند. سپس پس زمینه، روشن تر می شود.
<div
v-on:click="$data.color+=100"
v-bind:style="{backgroundColor:'hsl('+$data.color+',80%,80%)'}"
>
<p>Click here</p>
</div>
گام های عملی
- ویژگی ها را در
dataبرگردان. - در متدها از
this.colorاستفاده کن. - اگر اسم با
$یا_بود،this.$dataبنویس.
نکته: برای دسترسی در قالب، می توانی از $data هم استفاده کنی. اما خوانایی مهم است.
هشدار: تغییر بی برنامه داده ها، اشکال می سازد. پس ساختار را ساده نگه دار.
پیوندهای داخلی
برای صفات عبوری به $attrs سر بزن. همچنین صفحه نمونه کامپوننت فهرست کامل آبجکت ها و متدها را دارد.
جمع بندی سریع
- $data همان داده های کامپوننت است.
- عادی بنویس
this.prop؛ ساده تر است. - برای نام های خاص از
this.$dataکمک بگیر. - در قالب هم می شود
$dataنوشت.