فهرست سرفصل‌های Vue
خانه (HOME) معرفی (Intro) دایرکتیوها (Directives) v-bind (v-bind) v-if (v-if) v-show (v-show) v-for (v-for) رویدادها (Events) v-on (v-on) متدها (Methods) تغییردهنده های رویداد (Event Modifiers) فرم ها (Forms) v-model (v-model) بایندینگ CSS (CSS Binding) ویژگی های محاسبه شده (Computed Properties) واچرها (Watchers) قالب ها (Templates) چرا، چگونه و راه اندازی (Why, How and Setup) اولین صفحه SFC (First SFC Page) کامپوننت ها (Components) پراپس (Props) کامپوننت های v-for (v-for Components) $emit() ($emit()) ویژگی های عبوری (Fallthrough) (Fallthrough Attributes) استایل Scoped (Scoped Styling) کامپوننت های محلی (Local Components) اسلات ها (Slots) v-slot (v-slot) اسلات های Scoped (Scoped Slots) کامپوننت های پویا (Dynamic Components) Teleport (Teleport) درخواست HTTP (HTTP Request) رفرنس های تمپلیت (Template Refs) هوک های چرخه عمر (Lifecycle Hooks) Provide/Inject (Provide/Inject) مسیریابی (Routing) ورودی های فرم (Form Inputs) انیمیشن ها (Animations) انیمیشن با v-for (Animations with v-for) بیلد (Build) Composition API (Composition API) ویژگی های توکار (Built-in Attributes) ویژگی 'is' ('is' Attribute) ویژگی 'key' ('key' Attribute) ویژگی 'ref' ('ref' Attribute) کامپوننت های توکار (Built-in Components) <KeepAlive> (<KeepAlive>) <Teleport> (<Teleport>) <Transition> (<Transition>) <TransitionGroup> (<TransitionGroup>) المان های توکار (Built-in Elements) <component> (<component>) <slot> (<slot>) <template> (<template>) نمونه کامپوننت (Component Instance) $attrs ($attrs) $data ($data) $el ($el) $parent ($parent) $props ($props) $refs ($refs) $root ($root) $slots ($slots) $emit() ($emit()) $forceUpdate() ($forceUpdate()) $nextTick() ($nextTick()) $watch() ($watch()) دایرکتیوها (Directives) v-bind (v-bind) v-cloak (v-cloak) v-for (v-for) v-html (v-html) v-if (v-if) v-else-if (v-else-if) v-else (v-else) v-memo (v-memo) v-model (v-model) v-on (v-on) v-once (v-once) v-pre (v-pre) v-show (v-show) v-slot (v-slot) v-text (v-text) گزینه های نمونه (Instance Options) داده ها (data) متدها (methods) محاسبه شده ها (computed) watch (watch) پراپس (props) emits (emits) expose (expose) هوک های چرخه عمر (Lifecycle Hooks) beforeCreate (beforeCreate) created (created) beforeMount (beforeMount) mounted (mounted) beforeUpdate (beforeUpdate) updated (updated) beforeUnmount (beforeUnmount) unmounted (unmounted) errorCaptured (errorCaptured) renderTracked (renderTracked) renderTriggered (renderTriggered) activated (activated) deactivated (deactivated) serverPrefetch (serverPrefetch) مثال ها (Examples) تمرین ها (Exercises) کوییز (Quiz) سیلابس (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Vue

Vue — نمونه کامپوننت (Component Instance)

آخرین بروزرسانی: 1404/08/21

نمونه کامپوننت (Component Instance)

«نمونه کامپوننت (Component Instance)» یعنی همان شی زنده یک کامپوننت. این شی، چیزهای آماده دارد؛ مثل آبجکت ها و متدها. بنابراین با آن می توانیم رفتار کامپوننت را کنترل کنیم. مثل کنترلر بازی که دکمه های مختلف دارد و هرکدام کاری می کنند.

آبجکت های مهم در نمونه

Vue در نمونه کامپوننت چند آبجکت می دهد. هرکدام نقشی دارند و مستقیم از درون کامپوننت قابل دسترسی هستند.

  • $attrs: صفات و شنونده های رویداد روی تگ کامپوننت.
  • $data: داده های تعریف شده در بخش data همان کامپوننت.
  • $el: ریشه DOM مربوط به این کامپوننت.
  • $parent: نمونه Vue مربوط به کامپوننت والد.
  • $props: پراپ های اعلام شده در کامپوننت گیرنده.
  • $refs: عناصر DOM یا فرزندانی که ref گرفته اند.
  • $root: نمونه ریشه کل برنامه Vue.
  • $slots: اسلات هایی که والد فرستاده است.

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

این متدها با this در دسترس هستند. هرکدام کار مشخصی انجام می دهند.

  • $emit(): رویداد سفارشی را بالا به والد ارسال می کند.
  • $forceUpdate(): رندر دوباره را مجبور می کند انجام شود.
  • $nextTick(): بعد از به روزرسانی DOM کد را اجرا می کند.
  • $watch(): ناظر می سازد و تابع توقف برمی گرداند.

گام های عملیِ سریع

  1. ابتدا وظیفه هر بخش را کوتاه یادداشت کن.
  2. سپس با this به آبجکت ها و متدها دسترسی بگیر.
  3. در پایان، ارتباط والد و فرزند را با $emit تست کن.

نکته: «نمونه کامپوننت» مرکز فرمان است. بنابراین تغییرهای مهم را از همین جا مدیریت کن.

هشدار: بیش ازحد از $forceUpdate استفاده نکن؛ اول دلیلِ عدم به روزرسانی را پیدا کن.

پیوندهای داخلی

برای ساختار قالب به عنصر template سر بزن. برای مدیریت ناحیه های محتوا نیز اسلات ها در Vue را ببین.

منابع مرتبط

W3Schools: Component Instance — فهرست رسمی آبجکت ها و متدها.

W3Schools: $attrs — توضیح جزئی درباره $attrs.

جمع بندی سریع

  • نمونه کامپوننت مرکز کنترل است.
  • $data و $props منبع داده هستند.
  • $emit پیام را به والد می فرستد.
  • $nextTick بعد از به روزرسانی اجرا می شود.