vuejs الكائن في props و data:function(){}

يتم استخدام props بداخل المكونات Components وذلك عند تمرير قيمة معينة للمكون الذي يتم تضمينه، مثال:
عند تعريف مكون blog-post نمرر له القيمة عنوان المنشور كالتالي:
 

<blog-post post-title="hello!"></blog-post>

ثم ضمن المكون نفسه نقوم بتعريف القيمة التي سيستقبلها كالتالي:

Vue.component('blog-post', {
	//هنا يتم تمرير القيمة
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

أما عند تعريف المتحولات ضمن data، فبذلك تبقى هذه المتحولات خاصة بالمكون نفسه، مثال:
 

<div id="app">
  <span v-text="message"></span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'هذه الرسالة سيتم طباعتها ضمن العنصر span'
  }
})

لإضافة بيانات إلى component يتم عن طريق 

1. إضافة البيانات إلى ال data function

2. استقبال البيانات من ال component الأب 

متى تستخدم الطريقة الأولى؟

عند استخدام ال component لمرة واحدة أو عدة مرات بنفس البيانات دون تغيير

متى تستخم الطريقة الثانية ؟

عند استخدام ال component لعدة مرات باستخدام بيانات مختلفة