$parent ($parent)
«$parent» یعنی نمونه والد کامپوننت. «نمونه (Instance)» همان شیء زنده Vue است. با آن می توان داده والد را خواند یا متدش را صدا زد. اما بهتر است بیشتر وقت ها از «props/emit» یا «provide/inject» استفاده کنیم. چون کد تمیزتر می شود.
تعریف و رفتار آبجکت $parent
$parent به والد مستقیم وصل است. در ریشه برنامه، مقدار $parent برابر null است. بنابراین اول ساختار را بشناس. سپس با احتیاط تغییر بده. چون دسترسی مستقیم وابستگی می سازد.
نمونه 1: تغییر داده والد از فرزند
با کلیک، مقدار text در والد عوض می شود. این روش ساده است؛ ولی ارتباط را سفت می کند.
<template>
<div>
<h3>Change Text</h3>
<p>Click the button to update the parent text.</p>
<button v-on:click="changeText">Change text in parent</button>
</div>
</template>
<script>
export default {
methods: {
changeText() {
this.$parent.text = 'Hello!';
}
}
};
<\/script>
نمونه 2: صدا زدن متد والد از فرزند
اینجا، دکمه متد toggleColor در والد را اجرا می کند. این کار ممکن است؛ اما وابستگی می سازد.
<template>
<div>
<h3>Toggle Color</h3>
<p>Click to toggle parent color.</p>
<button v-on:click="callParentToggle">Toggle</button>
<p>Parent contains the toggleColor method.</p>
</div>
</template>
<script>
export default {
methods: {
callParentToggle() {
this.$parent.toggleColor();
}
}
};
<\/script>
نکته مهم نگه داری
نکته: برای ارتباط معمول، بهتر است از props و $emit() استفاده کنی. کد پایدارتر می شود.
پیوندهای داخلی
برای مفاهیم پایه نمونه ها، صفحه نمونه کامپوننت مفید است. همچنین الگوی «آبشار داده» را در provide/inject ببین.
جمع بندی سریع
- $parent به والد مستقیم اشاره می کند.
- در ریشه، مقدار آن null است.
- برای ارتباط ایمن، props/emit بهتر است.
- دسترسی مستقیم وابستگی می سازد.