$root ($root)
«آبجکت $root» در Vue یعنی «نمونه ریشه برنامه». هر کامپوننت فرزند می تواند مستقیم به آن برسد. سپس می تواند داده و متد ریشه را بخواند یا تنظیم کند. مثل مدیر مدرسه که همه کلاس ها به او دسترسی دارند.
تعریف و کاربرد آبجکت $root
آبجکت $root نماینده کامپوننت ریشه کل اپ است. اگر در خود ریشه استفاده شود، همان نمونه خودش است. از هر عمقی می توان با this.$root متد صدا زد یا مقدار داده را عوض کرد. اما برای نگه داری بهتر، ارتباطات را با props/emit یا provide/inject انجام بده.
نکته: اگر فقط انتقال داده می خواهی، از $props کمک بگیر. اگر سلسله مراتبی نیاز داری، به $parent نگاه کن. همچنین این صفحه خودمان: آبجکت $root.
نمونه 1: تغییر متن ریشه از یک فرزند
در فرزند روی دکمه بزن. متن متغیر ریشه به «Hello!» تغییر می کند. این کار مستقیم است؛ اما بااحتیاط استفاده کن.
<template>
<div>
<h3>Change Text</h3>
<p>Click the button to toggle the text in the PRE tag of the root component.</p>
<button @click="changeRootText">Change text in root</button>
</div>
</template>
<script>
export default {
methods: {
changeRootText() {
this.$root.text = 'Hello!';
}
}
};
<\/script>
نمونه 2: تغییر رنگ یک تگ در ریشه از نوه
اینجا کامپوننت «نوه» رنگ یک تگ در ریشه را عوض می کند. یعنی چند سطح بالاتر هدف گرفته می شود.
<template>
<div>
<h4>Grand Child Component</h4>
<p>Click the button to toggle the color of the P tag in the root component.</p>
<button @click="changeRootColor">Change color in root</button>
</div>
</template>
<script>
export default {
methods: {
changeRootColor() {
this.$root.color = 'lightgreen';
}
}
};
<\/script>
هشدار کوچک
هشدار: زیاده روی در $root کد را شکننده می کند. بنابراین اولویت با props/emit و provide/inject است. سپس در موارد خاص سراغ $root برو.
جمع بندی سریع
- $root نمونه ریشه اپ است.
- از هر عمقی به آن می رسی.
- برای نگه داری، props/emit بهتر است.
- فقط در موارد خاص از $root استفاده کن.