$refs ($refs)
«آبجکت $refs» در Vue فهرستی از «رف ها (Refs)» است. رف یعنی برچسب گذاری یک عنصر DOM با ref. سپس مستقیم به همان عنصر دسترسی می گیری. این روش شبیه querySelector است؛ اما کوتاه تر و ایمن تر در کامپوننت.
تعریف و کاربرد آبجکت $refs
هر عنصری که ویژگی ref دارد، داخل $refs ذخیره می شود. سپس با this.$refs به آن می رسی. بنابراین می توان متن، استایل یا مقدار ورودی را کنترل کرد. دقت کن، این راه حل اضطراری است؛ بهتر است تغییرات را تا حد امکان اعلان محور نگه داری.
نمونه 0: تغییر متن یک تگ با $refs
با متد، متن پاراگراف را به «Hello!» تغییر می دهیم؛ ساده و مستقیم.
<template>
<div>
<p ref="pEl">Initial...</p>
<button @click="changeVal">Change</button>
</div>
</template>
<script>
export default {
methods: {
changeVal() {
this.$refs.pEl.innerHTML = "Hello!";
}
}
};
<\/script>
نمونه 1: کپی متن از یک پاراگراف به دیگری
دکمه را بزن. متن پاراگراف اول در دومی کپی می شود. مثل انتقال تکلیف.
<template>
<h1>Example</h1>
<p ref="p1">Click the button to copy this text into the paragraph below.</p>
<button @click="transferText">Transfer text</button>
<p ref="p2">...</p>
</template>
<script>
export default {
methods: {
transferText() {
this.$refs.p2.innerHTML = this.$refs.p1.innerHTML;
}
}
};
<\/script>
نمونه 2: همگام سازی ورودی با یک پاراگراف
هرچه تایپ کنی، همان لحظه در پاراگراف نوشته می شود. مثل تابلو اعلانات.
<template>
<h1>Example</h1>
<p>Start writing inside the input element, and the text will be copied into the last paragraph by the use of the '$refs' object.</p>
<input ref="inputEl" @input="getRefs" placeholder="Write something..">
<p ref="pEl"></p>
</template>
<script>
export default {
methods: {
getRefs() {
this.$refs.pEl.innerHTML = this.$refs.inputEl.value;
}
}
};
<\/script>
نمونه 3: دسترسی آرایه ای به چند ref مشابه
وقتی چند عنصر یک ref مشترک دارند، در آرایه ذخیره می شوند. سپس عضو سوم را می خوانیم.
<template>
<h1>Example</h1>
<p>Click the button to reveal the 3rd list element stored as an array element in the $refs object.</p>
<button @click="getValue">Get the 3rd list element</button><br>
<ul>
<li v-for="x in liTexts" ref="liEl">{{ x }}</li>
</ul>
<pre>{{ thirdEl }}</pre>
</template>
<script>
export default {
data() {
return {
thirdEl: ' ',
liTexts: ['Apple', 'Banana', 'Kiwi', 'Tomato', 'Lichi']
};
},
methods: {
getValue() {
this.thirdEl = this.$refs.liEl[2].innerHTML;
console.log("this.$refs.liEl = ", this.$refs.liEl);
}
}
};
<\/script>
<style>
pre {
background-color: lightgreen;
display: inline-block;
}
</style>
نکته نگه داری و مسیرهای بهتر
نکته: تا می توانی از بایندینگ و پراپ ها استفاده کن. سپس برای موارد خاص سراغ آبجکت $refs برو. همچنین برای دسترسی ریشه از $el کمک بگیر یا داده ها را با $props عبور بده.
جمع بندی سریع
- $refs از refها ساخته می شود.
- با this.$refs به عناصر برس.
- برای چند ref مشابه، آرایه برمی گردد.
- اولویت با روش های اعلان محور است.