پراپس (Props)

پراپس (Props) یعنی «ویژگی های ورودی» برای کامپوننت. با آن داده می دهیم. «کامپوننت (Component)» یک تکه UI قابل استفاده مجدد است. این روش مثل برچسب نام روی جعبه هاست. هر جعبه، محتوا و برچسب خودش را دارد.

1) فرستادن داده با پراپس

در App.vue برای هر آیتم غذا، یک ویژگی سفارشی می فرستیم. این ویژگی همان پراپس است. نام ویژگی در HTML به صورت کباب کیس است. کباب کیس یعنی جدا با خط تیره.

<template>
  <h1>Food</h1>
  <food-item food-name="Apples" />
  <food-item food-name="Pizza" />
  <food-item food-name="Rice" />
</template>

<script><\/script>

مشاهده در ادیتور

2) گرفتن داده داخل کامپوننت

در FoodItem.vue لیست پراپس را تعریف می کنیم. در جاوااسکریپت باید نام پراپس را به صورت camelCase بنویسیم. کمل کیس یعنی هر کلمه با حرف بزرگ شروع می شود.

<template>
  <div>
    <h2>{{ foodName }}</h2>
  </div>
</template>

<script>
export default {
  props: [
    "foodName"
  ]
};
<\/script>

مشاهده در ادیتور

نمونه کامل با توضیح غذا

اینجا توضیح هر غذا را هم با پراپس می فرستیم و در یک فلکس باکس نمایش می دهیم. «فلکس باکس (Flexbox)» روش چیدن باکس ها کنار هم است.

<template>
  <h1>Food</h1>
  <div id="wrapper">
    <food-item
      food-name="Apples"
      food-desc="Apples are a type of fruit that grow on trees." />
    <food-item
      food-name="Pizza"
      food-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top." />
    <food-item
      food-name="Rice"
      food-desc="Rice is a type of grain that people like to eat." />
  </div>
</template>

<script><\/script>

مشاهده در ادیتور

<template>
  <div>
    <h2>{{ foodName }}</h2>
    <p>{{ foodDesc }}</p>
  </div>
</template>

<script>
export default {
  props: [
    "foodName",
    "foodDesc"
  ]
};
<\/script>

مشاهده در ادیتور

3) پراپس بولی (Boolean)

برای مقدار غیراز رشته، باید از v-bind: استفاده کنیم. بولی یعنی درست یا غلط. بعد می توانیم با v-show چیزی را نشان دهیم یا پنهان کنیم.

<template>
  <h1>Food</h1>
  <p>My favorite food has a diploma image attached to it.</p>
  <div id="wrapper">
    <food-item
      food-name="Apples"
      food-desc="Apples are a type of fruit that grow on trees."
      v-bind:is-favorite="true" />
    <food-item
      food-name="Pizza"
      food-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top."
      v-bind:is-favorite="false" />
    <food-item
      food-name="Rice"
      food-desc="Rice is a type of grain that people like to eat."
      v-bind:is-favorite="false" />
  </div>
</template>

مشاهده در ادیتور

<template>
  <div>
    <h2>
      {{ foodName }}
      <img src="/img_quality.svg" v-show="isFavorite" />
    </h2>
    <p>{{ foodDesc }}</p>
  </div>
</template>

<script>
export default {
  props: [
    "foodName",
    "foodDesc",
    "isFavorite"
  ]
};
<\/script>

<style>
img {
  height: 1.5em;
  float: right;
}
<\/style>

مشاهده در ادیتور

نکته: نام ویژگی در تگ، کباب کیس است. در کد جاوااسکریپت، همان نام به صورت کمل کیس استفاده می شود.

4) تعیین نوع و الزامی بودن پراپس

می توانیم به جای آرایه، یک آبجکتِ قوانین بدهیم. نوع هر پراپس، الزامی بودن و مقدار پیش فرض را مشخص می کنیم. این کار مثل راهنمای استفاده است.

<script>
export default {
  props: {
    foodName: {
      type: String,
      required: true
    },
    foodDesc: {
      type: String,
      required: false,
      default: "This is the default description."
    },
    isFavorite: {
      type: Boolean,
      required: false,
      default: false
    }
  }
};
<\/script>

مشاهده در ادیتور

نمونه مقدار پیش فرض

اگر پراپس نیاید، مقدار پیش فرض فعال می شود. این کمک می کند صفحه همیشه معنی دار باشد.

<template>
  <h1>Food</h1>
  <p>My favorite food has a diploma image attached to it.</p>
  <div id="wrapper">
    <food-item
      food-name="Apples"
      food-desc="Apples are a type of fruit that grow on trees."
      v-bind:is-favorite="true" />
    <food-item
      food-name="Pizza"
      food-desc="Pizza has a bread base with tomato sauce, cheese, and toppings on top."
      v-bind:is-favorite="false" />
    <food-item
      food-name="Rice"
      v-bind:is-favorite="false" />
  </div>
</template>

مشاهده در ادیتور

اعتبارسنجی با تابع

می توانیم برای پراپس، validator بدهیم. اگر مقدار نامعتبر باشد، هشدارِ کنسول می گیریم. این کار مثل داور کلاس است.

<script>
export default {
  props: {
    foodName: {
      type: String,
      required: true
    },
    foodDesc: {
      type: String,
      required: false,
      default: "This is the default description.",
      validator: function(value) {
        if (20 < value.length && value.length < 50) {
          return true;
        }
        else {
          return false;
        }
      }
    },
    isFavorite: {
      type: Boolean,
      required: false,
      default: false
    }
  }
};
<\/script>

مشاهده در ادیتور

5) تغییر مستقیم پراپس ممنوع

پراپس «فقط خواندنی» است. پس در فرزند نباید مستقیم تغییرش دهیم. می توانیم یک مقدار data از روی آن بسازیم و همان را تغییر دهیم. این کار مثل کپی روی دفترچه خودت است.

<template>
  <div>
    <h2>
      {{ foodName }}
      <img src="/img_quality.svg" v-show="foodIsFavorite" />
    </h2>
    <p>{{ foodDesc }}</p>
    <button v-on:click="toggleFavorite">Favorite</button>
  </div>
</template>

<script>
export default {
  props: [
    "foodName",
    "foodDesc",
    "isFavorite"
  ],
  data() {
    return {
      foodIsFavorite: this.isFavorite
    };
  },
  methods: {
    toggleFavorite() {
      this.foodIsFavorite = !this.foodIsFavorite;
    }
  }
};
<\/script>

<style>
img {
  height: 1.5em;
  float: right;
}
<\/style>

مشاهده در ادیتور

جمع بندی سریع

• پراپس، ورودی کامپوننت است.
• HTML کباب کیس است؛ JS کمل کیس است.
• برای غیررشته، از v-bind استفاده کن.
• نوع و پیش فرض را با آبجکت تعیین کن.
• پراپس را مستقیم تغییر نده.

نکته: برای مرور، بخش پراپس ویو را نشانه گذاری کن. همچنین برای شروع کامپوننت ها، به صفحه کامپوننت ها سر بزن.