نمونه کامپوننت (component instance)
INFO
این صفحه پراپرتیها و توابع داخلی که در نمونه عمومی (public instance) کامپوننت exposed شده یعنی this
را مستند سازی میکند.
تمام پراپرتیهایی که در این صفحه لیست شده اند readonly هستند (به غیر از پراپرتیهای تو در تو در data$
)
data$
آبجکت بازگردانده شده از آپشن data
که توسط کامپوننت reactive شده. نمونه کامپوننت دسترسی به پراپرتیها روی ابجکت data خودش را پراکسی میکند.
تایپ (Type)
tsinterface ComponentPublicInstance { $data: object }
props$
این آبجکت prop های کنونی resolve شده کامپوننت را نشان میدهد.
تایپ (Type)
tsinterface ComponentPublicInstance { $props: object }
جزئیات
تنها propهای تعریف شده توسط
props
شامل این آبجکت خواهند شد. کامپوننت نمونه دسترسی به پراپرتیها روی آبجکت props را پراکسی میکند.
el$
همان root DOM node است که نمونه کامپوننت در حال مدیریت آن است.
تایپ (Type)
tsinterface ComponentPublicInstance { $el: Node | undefined }
جزئیات
مقدار
el$
برابر باundefined
خواهد بود تا زمانی که کامپوننت mounted شود.- برای کامپوننتهایی که یک المنت root دارند
el$
به آن المنت اشاره خواهد کرد. - برای کامپوننتهایی که متن (text) به عنوان root دارند
el$
به text node اشاره خواهد کرد. - برای کامپوننتهایی که چندین root node دارند
el$
همان placeholder DOM node خواهد بود که Vue برای پیگیری کردن از موقعیت کامپوننتها در DOM استفاده میکند (یک text node یا یک comment node در حالت SSR hydration)
نکته
برای ثبات بهتر توصیه میشود که از template refs برای دسترسی مستقیم به المنتها به جای
el$
استفاده کنید.- برای کامپوننتهایی که یک المنت root دارند
options$
آپشنهای resolved شده کامپوننت که برای نمونه سازی از نمونه کامپوننت کنونی استفاده شده است.
تایپ (Type)
tsinterface ComponentPublicInstance { $options: ComponentOptions }
جزئیات
آبجکت
options$
آپشنهای resolve شده برای کامپوننت کنونی را نمایش میدهد و حاصل ادغام این منابع ممکن است:- mixinهای سراسری
- کامپوننتهای بر پایه
extends
- mixinهای کامپوننت
معمولا برای پشتیبانی از آپشنهای سفارشی کامپوننت استفاده میشود:
jsconst app = createApp({ customOption: 'foo', created() { console.log(this.$options.customOption) // => 'foo' } })
همچنین ببینید
app.config.optionMergeStrategies
parent$
پراپرتی parent$ اگر نمونه جاری یک والد داشته باشد شامل نمونه والد (parent instance) است. برای خود نمونه ریشه (root instance) پراپرتی parent$ برابر با مقدار null
خواهد بود.
تایپ (Type)
tsinterface ComponentPublicInstance { $parent: ComponentPublicInstance | null }
root$
نمونه کامپوننت ریشه متعلق به درخت کامپوننت (component tree) کنونی. اگر نمونه کنونی والدی نداشته باشد این مقدار برابر با خودش خواهد بود.
تایپ (Type)
tsinterface ComponentPublicInstance { $root: ComponentPublicInstance }
slots$
یک ابجکت که اسلاتهای pass شده توسط کامپوننت والد را منتشر میکند.
تایپ (Type)
tsinterface ComponentPublicInstance { $slots: { [name: string]: Slot } } type Slot = (...args: any[]) => VNode[]
جزئیات
معمولا زمانی که به شکل دستی در حال ساخت render functionها هستیم از آن استفاده میشود اما همچنین میتواند برای تشخیص اینکه یک اسلات موجود است یا خیر استفاده شود. هر اسلات روی
this.$slots
به عنوان یک تابع که یک آرایه از vnodeها را برمیگرداند را منتشر میکند که متصل به کلید مربوط به نام آن اسلات است. اسلات پیشفرض به عنوان this.$slots.default منتشر شده است.اگر یک اسلات یک scoped slot باشد آرگومانهای پاس داده شده به توابع slot به عنوان slot props در دسترس slot قرار میگیرند.
همچنین ببینید Render Functions - Rendering Slots
refs$
یک آبجکت از المنتهای DOM و نمونههای کامپوننت که توسط template refs ثبت شدهاند.
تایپ (Type)
tsinterface ComponentPublicInstance { $refs: { [name: string]: Element | ComponentPublicInstance | null } }
همچنین ببینید
attrs$
یک آبجکت که شامل ویژگیهای fallthrough متعلق به کامپوننت است.
تایپ (Type)
tsinterface ComponentPublicInstance { $attrs: object }
جزئیات
Fallthrough Attributes ویژگیها و event handler هایی هستند که توسط کامپوننت والد پاس داده میشوند اما به عنوان یک prop یا یک emitted event توسط کامپوننت فرزند تعریف نشدهاند.
اگر فقط یک المنت ریشه وجود داشته باشد به صورت پیشفرض همه چیز در
attrs$
به صورت خودکار بر روی المنت ریشه کامپوننت به ارث برده میشود . اگر کامپوننت چندین node ریشهای داشته باشد این رفتار غیر فعال میشود. این رفتار میتواند به صورت مشخص با آپشنinheritAttrs
غیر فعال شود.همچنین ببینید
()watch$
یک API دستوری برای ساخت wathcerها.
تایپ (Type)
tsinterface ComponentPublicInstance { $watch( source: string | (() => any), callback: WatchCallback, options?: WatchOptions ): StopHandle } type WatchCallback<T> = ( value: T, oldValue: T, onCleanup: (cleanupFn: () => void) => void ) => void interface WatchOptions { immediate?: boolean // default: false deep?: boolean // default: false flush?: 'pre' | 'post' | 'sync' // default: 'pre' onTrack?: (event: DebuggerEvent) => void onTrigger?: (event: DebuggerEvent) => void } type StopHandle = () => void
جزئیات
اولین آرگومان منبع watch است که میتواند یک string نام متعلق به یک پراپرتی از یک کامپوننت، یک dot-delimited path string، یک string ساده و یا یک getter function باشد.
دومین آرگومان یک تابع callback است. این تابع مقدار جدید و قدیم متعلق به منبع watch را دریافت میکند.
immediate
: تابع callback را بلافاصله در موقع ساخت watcher فراخوانی میکند. در فراخوانی اول مقدار قدیمیundefined
خواهد بود.deep
: اگر منبع یک آبجکت باشد پیمایش عمیق (deep traversal) را روی آن تحمیل میکند و تابع callback هنگام تغییرات عمیق (deep mutations) روی آبجکت فراخوانی میشود. همچنین Deep Watchers را مطالعه کنید.flush
: زمانبندی flush مربوط به تابع callback را تنظیم میکند. همچنین Callback Flush Timing و()watchEffect
را مطالعه کنید.onTrack / onTrigger
: برای دیباگ کردن وابستگیهای watcher استفاده میشود. همچنین Watcher Debugging را مطالعه کنید.
مثال
watch کردن نام یک پراپرتی:
jsthis.$watch('a', (newVal, oldVal) => {})
Watch کردن یک مسیر dot-delimited:
jsthis.$watch('a.b', (newVal, oldVal) => {})
استفاده از getter برای عبارات پیچیده تر:
jsthis.$watch( // every time the expression `this.a + this.b` yields // a different result, the handler will be called. // It's as if we were watching a computed property // without defining the computed property itself. () => this.a + this.b, (newVal, oldVal) => {} )
متوقف کردن یک watcher:
jsconst unwatch = this.$watch('a', cb) // later... unwatch()
همچنین ببینید
()emit$
فراخوانی یک رویداد سفارشی روی نمونه (instance) حاضر. هر آرگومان اضافهای به تابع callback متعلق به listener پاس داده میشود.
تایپ (Type)
tsinterface ComponentPublicInstance { $emit(event: string, ...args: any[]): void }
نمونه
jsexport default { created() { // only event this.$emit('foo') // with additional arguments this.$emit('bar', 1, 2, 3) } }
همچنین ببینید
()forceUpdate$
نمونه کامپوننت را مجبور میکند تا دوباره رندر (re-render) شوند.
تایپ (Type)
tsinterface ComponentPublicInstance { $forceUpdate(): void }
جزئیات
با توجه به سیستم خودکار reactivity متعلق به Vue این به ندرت مورد نیاز قرار میگیرد. تنها زمانی به آن نیاز دارید که شما در یک کامپوننت به صورت مشخص یک non-reactive state در کامپوننت به کمک reactivity API ها ایجاد کرده باشید.
()nextTick$
نسخه Instance-bound از نسخه سراسری ()nextTick
.
تایپ (Type)
tsinterface ComponentPublicInstance { $nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void> }
جزئیات
تنها تفاوت نسبت به نسخه سراسری
()nextTick
این است که callback پاس داده شده به()this.$nextTick
دارای this
context متصل شده به نمونه فعلی کامپوننت خواهد بود.همچنین ببینید
()nextTick