https://virgool.ir/feed/@majid.khaleqi2014توسعه دهنده ی وب / علاقه مند به نوشتنfa2026-11-12 05:54:15https://files.virgool.ir/upload/users/244406/avatar/avatar.pnghttps://virgool.ir/@majid.khaleqi2014https://virgool.ir/@majid.khaleqi2014/تفاوت-props-و-data-در-vuejs-o2vx9txzk5qfسلام دوستانیک موضوعی که ممکنه درکش ی مقدار سخت باشه واسه کسایی که تازه Vue.js شروع کردن (از جمله خودم)تفاوت بین Props و Data هست.این Props چی هست اصلا؟برای پاس دادن (انتقال) اطلاعات از کامپوننت پدر به کامپوننت فرزند از Props استفاده میشهپراپس ها Read-Only هستن، یعنی چی؟ یعنی اینکه فقط میشه خوندشون! قابل دستکاری نیستناین Props ها داخل کامپوننت Vue و با استفاده از پراپرتی props ثبت میشنبرای مثال :کامپوننت Welcome.vueتو این مثال ما یک مقدار رو از طریق props میگیریم و اونو داخل تگ Html نمایش میدیمهمونطور که مشاهده میکنین یک property قرار دادیم با نام props که تو این قسمت پراپس هایی که به این کامپوننت پاس داده میشه رو دریافت میکنیم.حالا بیاین این name رو از طریق کامپوننت پدر به این کامپوننت (Welcome.vue) ارسال کنیم کامپوننت App.vueهمونطور که میبینید ما مقدار name رو به کامپوننت Welcome ارسال کردیم، این مقداری که ارسال کردیم از اون طرف داخل props قابل دسترسی هست.خب، تا اینجا فهمیدیم Props چیه و چطور میشه اطلاعات رو بین کامپوننت ها پاس کاری کرد.پس Data چیه؟دیتایی که ما داخل هر کامپوننت تعریف میکنیم نسبت به اون کامپوننت مستقل هستند، این یعنی چی؟یعنی اینکه از کامپوننت های دیگه به اون دیتا دسترسی نداریم و نمیتونیم تغیرش بدیم مگر اینکه از طریق props مقدار data رو پاس بدیم به کامپوننتی که میخوایم.دیتا ها برعکس props ها قابل تغیر هستن و اگه Update بشن این تغیرات توسط Dom رصد میشه و Dom هم به صورت اتوماتیک Re-render میشه خب بیاین این مثال رو بررسی کنیم:فرض کنین یک Data داخل کامپوننت App.vue با نام name داریمکامپوننت App.vueتوجه داشته باشین که Data حتما باید بصورت Function نوشته بشهخب ما مقداری که داخل data با اسم name وجود داره رو از طریق props به کامپوننت Welcome.vue فرستادیم همونطور که میبینین طریقه پاس دادنمون ی تفاوت کوچیکی داره و قبل ازname من ی : قرار دادم این برای این هست که وقتی میخوایم دیتایی که داخل کامپوننت وجود داره رو از طریق پراپس پاس بدیم به کامپوننت دیگرمون حتما باید عمل bind کردن اتفاق بیفته، این دستور "name="name: کوتاه شده ی دستور "v-bind:name="name هست خب، حالا میخام یک دکمه اضافه کنم که بعد کلیک مقدار دیتایی که پاس دادیم تغیر کنهWelcome.vueیک متد در قسمت methods تعریف کردیم که با هر کلیک مقدار name تغیر میکنه، که با هر بار تغیر Dom متوجه تغیرات میشه و re-render میشه.ممنون از وقتی که برای خوندن گذاشتید?Majidkhaleqi.ir مجید خالقیمجید خالقیFri, 07 Aug 2020 22:31:43 +0430