ویوو جی‌اس از راه بهتر - کامپوننت (Component) ها

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>

https://codepen.io/AliN11/embed/eYJEYRY

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

فرض کنیم از داخل کامپوننت فرزند لازم داریم با کامپوننت والد تعامل داشته باشیم. مثلا می‌خوایم وقتی توی کامپوننت فرزند روی یک دکمه کلیک شد، یک متد از کامپوننت والد رو اجرا کنیم. برای اینکار باید به رویداد کامپوننت فرزند گوش بدیم (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>

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

https://codepen.io/AliN11/embed/LYGjPap

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

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