$el ($el)
«$el» یعنی عنصر ریشه DOM کامپوننت. «DOM» درخت تگ های صفحه است. مثل دفتر کلاس که فهرست دانش آموزها دارد. اما توجه کن، $el بعد از mount ساخته می شود. یعنی وقتی برنامه سوار شد.
تعریف و نکات کلیدی درباره آبجکت $el
$el نماینده ریشه کامپوننت است. اگر فقط یک ریشه باشد، $el همان تگ است. اما اگر چند ریشه باشد، $el فقط یک «گره متن» داخلی است. بنابراین تغییر مستقیم DOM با $el پیشنهاد نمی شود. بهتر است از «ref» و امکانات Vue استفاده کنیم.
نمونه ساده: تغییر پس زمینه با $el
در متد، مستقیم به ریشه دست می زنیم. این راه ممکن است، اما پیشنهاد نمی شود.
export default {
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
};
روش پیشنهادی: استفاده از ref به جای $el
با «ref» هدف را دقیق می گیریم. سپس کد منظم تر می ماند.
<template>
<div ref="rootDiv">
<h2>Example $el Object</h2>
<p>Better use ref instead of $el for style changes.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>
<script>
export default {
methods: {
changeColor() {
this.$refs.rootDiv.style.backgroundColor = 'lightgreen';
}
}
};
<\/script>
وقتی چند ریشه داریم
اگر چند عنصر در ریشه باشند، $el یک «متن جایگزین» است. بنابراین دست کاری DOM با $el ممکن نیست. خطا می گیرید.
<template>
<div>
<h2>Example $el Object</h2>
<p>Cannot rely on $el when multiple root nodes exist.</p>
<button v-on:click="changeColor">Click here</button>
</div>
<p>This extra p creates multiple root elements.</p>
</template>
<script>
export default {
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
};
<\/script>
پیوندهای داخلی
برای آشنایی با «نمونه کامپوننت» به نمونه کامپوننت برو. برای کار با ارجاع ها، صفحه $refs را ببین.
نکته: در Composition API با <script setup> به $el دسترسی نداریم.
جمع بندی سریع
- $el ریشه DOM کامپوننت است.
- بعد از mount در دسترس می شود.
- برای تغییرات، ref خواناتر است.
- چند ریشه؟ $el کمک زیادی نمی کند.