کاربرد ref در Vuejs

کاربرد ref در Vuejs

در این بخش قصد داریم به شما یاد دهیم که چطور از کامپوننت parent یه متد درون کامپوننت child را صدا بزنیم.

همانطور که در تصویر زیر می بینید، چرخه انتقال data بین کامپوننت های parent و child به دو حالت انجام می گیرد: 

  1. انتقال data از کامپوننت parent به کامپوننت child: که با استفاده از prop ها انجام می شود.
  2. انتقال data از کامپوننت child به کامپوننت parent: که با استفاده از emit event ها انجام می شود.

غیر از این دو حالت، یه روش دیگر نیز وجود دارد که برای صدا زدن متدهای کامپوننت child از درون کامپوننت parent استفاده می شود. این روش در واقع همان روش استفاده از ref است که در ادامه بررسی خواهد شد.

برای اینکه مطالبی که در این مقاله بیان می شود را بهتر درک کنید پیشنهاد می کنم ابتدا با استفاده از vue/cli@ یه پروژه Vue جدید بسازید و سپس کارهایی که در این  بخش انجام می شود را در آن اجرا کنید.

ابتدا دو تا کامپوننت با نام های Parent و Child می سازیم. کدهای کامپوننت های Parent و Child به ترتیب به صورت زیر هستند:

<template>
  <div class="parent">
      <h1>the blue color is parent component</h1>
      <button>click me (parent)</button>
      <Child />
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
  components: { Child },
  name: 'Parent',
};
</script>
<style lang="scss" scoped>
.parent {
  background-color: rgb(0, 225, 255);
  height: 100vh;
  padding-top: 30px;
}
</style>
<template>
  <div class="child">
  	<h3>the red color is child component</h3>
  	<button @click="showAlert">click me (child)</button>
  </div>
</template>
<script>
export default {
  name: 'Child',
  methods: {
    showAlert() {
      alert('Hello');
    },
  },
};
</script>
<style lang="scss" scoped>
.child{
    background-color: rgb(255, 81, 0);
    padding: 50px;
    margin: 20px;
}
</style>

و خروجی به صورت زیر است:

همانطور که در کامپوننت Child می بینید یک دکمه وجود دارد که با کلیک کردن روی آن، متد ()showAlert صدا زده شده و یک alert باز می کند که درون آن کلمه Hello نوشته شده است. این متد فقط در کامپوننت Child در دسترس است و از کامپوننت های دیگر نمی توان آن را صدا زد. البته در صورتی که از ref استفاده شود این امکان وجود دارد که از درون کامپوننت Parent آن را صدا کرد. برای این کار کافی است روی المان </ Child> از ref به عنوان attribute استفاده شده و برای صدا زدن متد موردنظر در کامپوننت Child از this.$refs استفاده شود.

دقت کنید که ref در واقع یک reference ID است و از آنجا که id ها یکتا هستند بنابراین باید برای هر ref نیز یک مقدار یکتا را در نظر گرفت.

با کمی تغییر روی کدهای کامپوننت Parent، خواهیم داشت:

<template>
  <div class="parent">
      <h1>the blue color is parent component</h1>
      <button @click="callShowAlert">click me (parent)</button>
      <Child ref="alertChild" />
  </div>
</template>
<script>
import Child from './Child.vue';
export default {
   components: { Child },
   name: 'Parent',
   methods: {
      callShowAlert() {
         this.$refs.alertChild.showAlert();
      },
   },
},
</script>
<style lang="scss" scoped>
.parent {
   background-color: rgb(0, 225, 255);
   height: 100vh;
   padding-top: 30px;
}
</style>

با توجه به اینکه در کامپوننت parent از ref استفاده کردیم، به متد ()showAlert دسترسی داریم و می توانیم آن را صدا بزنیم. حال اگر دکمه click me (parent) را فشار دهید متوجه خواهید شد که یک alert باز می شود که کلمه Hello درون آن نوشته شده است.

امیدوارم که مفهوم ref را به صورت مطلوب منتقل کرده باشیم. منتظر قسمت های بعدی این فصل باشید.

منبع:

 https://v3.vuejs.org/guide/component-template-refs.html

دوره در حال تکمیل است ... rocket
کاربر میهمان

دوست گرامی شما به عنوان کاربر میهمان در سایت سکان آکادمی حضور دارید لطفاً برای ارسال دیدگاه ابتدا وارد حساب خود شوید