سلام دوستان. یکی از مهمترین و پرکاربردترین بخش‌های فریم‌ورک ویوو، کامپوننت‌ها هست. با استفاده از کامپوننت‌ها می‌تونیم برنامه رو به بخش‌های مجزا تقسیم کنیم. مثلا یک کد HTML داریم بصورت زیر:

<ul class="universe">
  <li>I'm Sun</li>
  <li>I'm Earth</li>
  <li>I'm Moon</li>
  <li>I'm Oxygen</li>
</ul>

در حالت عادی اگه بخوایم از این کد توی جاهای مختلف استفاده کنیم باید همه‌ی محتویات رو تکرار کنیم:

<ul class="universe">
   ...
</ul>

<ul class="universe">
   ...
</ul>

<ul class="universe">
   ...
</ul>

و اگه بخوایم این کد رو ویرایش کنیم (مثلا یک li دیگه اضافه کنیم) ابتدا باید هر جایی که این کد تکرار شده رو پیدا کنیم و بعد تغییر بدیم. که این یک کار بیهوده هست وقتی چیزی داریم به اسم کامپوننت! با کامپوننت می‌تونیم اون کد HTML رو فقط یک بار بنویسیم و بی‌نهایت اون رو فراخونی کنیم.

توی ویوو کامپوننت‌ها نقش پر رنگی دارن و جالبه که بدونیم خود نمونه اصلی (Vue Instance که با new Vue ساخته شده) هم یک کامپوننت به حساب میاد. کامپوننت‌هایی هم که می‌سازیم یک نمونه‌ی Vue به حساب میان و می‌تونن اعضایی مثل data، methods، computed و … داشته باشن.

 

تعریف یک کامپوننت

روش‌های مختلفی برای ساختن یک کامپوننت وجود داره که استفاده از Vue.component() یکی از اونهاست:

Vue.component('universe', {
  template: `
    <ul class="universe">
      <li>I'm Sun</li>
      <li>I'm Earth</li>
      <li>I'm Moon</li>
      <li>I'm Oxygen</>
    </ul>
  `
})

به آرگومان اول این متد اسم کامپوننت رو پاس می‌دیم. آرگومان دوم یک آبجکت هست که شامل ویژگی‌های کامپوننت میشه. محتویات HTML کامپوننت رو بصورت رشته توی template قرار می‌دیم. حالا می‌تونیم از کامپوننت بالا بصورت <universe></universe> توی قسمت View استفاده کنیم:

کامپوننت‌ها می‌تونن بصورت تو در تو قرار بگیرن:

<component1>
  <component2>
    <component3></component3>
  </component2>
</component1>

توی کد بالا به component3 می‌گن فرزند که والد اون میشه component2 و خود component2 یک فرزند هست برای component1.

 

data در کامپوننت‌ها

همونطور که گفته شد، کامپوننت‌ها می‌تونن ویژگی‌هایی مثل نمونه Vue داشته باشن. مثلا data و computed پراپرتی‌ها. data توی کامپوننت‌ها بصورت زیر تعریف میشه:

Vue.component('universe', {
  template: `<strong>We are {{ message }}</strong>`,
  data() {
    return {
      message: 'strong'
    }
  }
})

آیا می‌تونید تفاوت data توی کامپوننت‌ها با data توی نمونه Vue رو متوجه بشید؟ data توی نمونه‌ی Vue یک آبجکت هست. اما توی کامپوننت‌ها، data یک تابع هست که یک آبجکت رو ریترن می‌کنه.

قسمت‌های زیر می‌تونن کمک‌کننده باشن:


 

پاس دادن اطلاعات به کامپوننت

کامپوننت زیر رو در نظر بگیرید:

Vue.component('post', {
  template: `
    <div>
      <h3>This is title</h3>
    </div>
  `
})

این کامپوننت زیاد قابل استفاده نیست. چون محتوای تگ h3 ثابت هست. باید روشی باشه که اطلاعات از بیرون کامپوننت پاس داده بشن تا بتونیم کامپوننت رو پویا کنیم. که اون استفاده از props هست. ابتدا پراپرتی‌هایی که لازمه از بیرون پاس داده بشن رو توی props می‌نویسیم. props یک آرایه هست:

Vue.component('post', {
  props: ['title'],
  template: `
    <div>
      <h3>{{ title }}</h3>
    </div>
  `
})

و هنگام استفاده از کامپوننت بصورت زیر به اون پاس می‌دیم:

<post title="How to blink"></post>

 

پاسخ به رویداد کامپوننت فرزند

فرض کنیم از داخل کامپوننت فرزند لازم داریم با کامپوننت والد تعامل داشته باشیم. مثلا می‌خوایم وقتی توی کامپوننت فرزند روی یک دکمه کلیک شد، یک متد از کامپوننت والد رو اجرا کنیم. برای اینکار باید به رویداد کامپوننت فرزند گوش بدیم (Listen). برای این کار وقتی یک رویداد اتفاق می‌افته، این رویداد باید یک Listener توی کامپوننت والد داشته باشه. Listener چیزی هست که وقتی رویدادی رخ میده، اجرا میشه.

ابتدا باید توی کامپوننت والد یک Listener تعریف کنیم. این Listener روی کامپوننت فرزند قرار می‌گیره (خط ۲ کد زیر)

<div>
   <child @say-hello="onSayHello"></child>
</div>


<script>
new Vue({
  methods: {
    onSayHello(value) {
      // ...
    }
  }
})
</script>

اینجا اسم Listener رو گذاشتیم say-hello و مقداری که به اون پاس دادیم، اسم یک متد توی والد (خط ۹) هست.

مرحله بعد باید توی کامپوننت فرزند یک رویداد رو به این Listener بچسبونیم. برای این کار از $emit استفاده می‌کنیم. به آرگومان اول $emit اسم Listener که از قبل توی والد تعریف شده رو پاس می‌دیم. کد زیر محتویات کامپوننت فرزند هست که گفتیم وقتی روی دکمه کلیک شد، Listener رو اجرا کن:

<button @click="$emit('say-hello')">Say Hello</button>

حالا وقتی که روی دکمه کلیک میشه، می‌تونیم با کامپوننت والد تعامل داشته باشیم. مثال زیر رو ببینید:

تب JS رو ببینین و به آرگومان دوم متد $emit دقت کنین. اینطوری به Listener مقدار پاس دادیم.

 

 خب دوستان این قسمت  هم به پایان رسید. قصد دارم مقاله‌ها و مطالب بیشتری از ویوو منتشر کنم. روزتون خوش.✌️😃