Component Instance
En esta página
Component Instance#
:::info
This page documents the built-in properties and methods exposed on the component public instance, i.e. this.
All properties listed on this page are readonly (except nested properties in $data).
:::
$data#
The object returned from the data option, made reactive by the component. The component instance proxies access to the properties on its data object.
- Type
ts
interface ComponentPublicInstance {
$data: object
}
$props#
An object representing the component's current, resolved props.
- Type
ts
interface ComponentPublicInstance {
$props: object
}
- Details
Only props declared via the props option will be included. The component instance proxies access to the properties on its props object.
$el#
The root DOM node that the component instance is managing.
- Type
ts
interface ComponentPublicInstance {
$el: any
}
- Details
$el will be undefined until the component is mounted.
- For components with a single root element,
$elwill point to that element. - For components with text root,
$elwill point to the text node. - For components with multiple root nodes,
$elwill be the placeholder DOM node that Vue uses to keep track of the component's position in the DOM (a text node, or a comment node in SSR hydration mode).
:::tip
For consistency, it is recommended to use template refs for direct access to elements instead of relying on $el.
:::
$options#
The resolved component options used for instantiating the current component instance.
- Type
ts
interface ComponentPublicInstance {
$options: ComponentOptions
}
- Details
The $options object exposes the resolved options for the current component and is the merge result of these possible sources:
- Global mixins
- Component
extendsbase - Component mixins
It is typically used to support custom component options:
js
const app = createApp({
customOption: 'foo',
created() {
console.log(this.$options.customOption) // => 'foo'
}
})
- See also
app.config.optionMergeStrategies
$parent#
The parent instance, if the current instance has one. It will be null for the root instance itself.
- Type
ts
interface ComponentPublicInstance {
$parent: ComponentPublicInstance | null
}
$root#
The root component instance of the current component tree. If the current instance has no parents this value will be itself.
- Type
ts
interface ComponentPublicInstance {
$root: ComponentPublicInstance
}
$slots#
An object representing the slots passed by the parent component.
- Type
```ts interface ComponentPublicInstance { $slots: { [name: string]: Slot } }
type Slot = (...args: any[]) => VNode[] ```
- Details
Typically used when manually authoring render functions, but can also be used to detect whether a slot is present.
Each slot is exposed on this.$slots as a function that returns an array of vnodes under the key corresponding to that slot's name. The default slot is exposed as this.$slots.default.
If a slot is a scoped slot, arguments passed to the slot functions are available to the slot as its slot props.
- See also Render Functions - Rendering Slots
$refs#
An object of DOM elements and component instances, registered via template refs.
- Type
ts
interface ComponentPublicInstance {
$refs: { [name: string]: Element | ComponentPublicInstance | null }
}
-
See also
- Special Attributes - ref
$attrs#
An object that contains the component's fallthrough attributes.
- Type
ts
interface ComponentPublicInstance {
$attrs: object
}
- Details
Fallthrough Attributes are attributes and event handlers passed by the parent component, but not declared as a prop or an emitted event by the child.
By default, everything in $attrs will be automatically inherited on the component's root element if there is only a single root element. This behavior is disabled if the component has multiple root nodes, and can be explicitly disabled with the inheritAttrs option.
-
See also
$watch()#
Imperative API for creating watchers.
- Type
```ts interface ComponentPublicInstance { $watch( source: string | (() => any), callback: WatchCallback, options?: WatchOptions ): StopHandle }
type WatchCallback
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 ```
- Details
The first argument is the watch source. It can be a component property name string, a simple dot-delimited path string, or a getter function.
The second argument is the callback function. The callback receives the new value and the old value of the watched source.
immediate: trigger the callback immediately on watcher creation. Old value will beundefinedon the first call.deep: force deep traversal of the source if it is an object, so that the callback fires on deep mutations. See Deep Watchers.flush: adjust the callback's flush timing. See Callback Flush Timing andwatchEffect().-
onTrack / onTrigger: debug the watcher's dependencies. See Watcher Debugging. -
Example
Watch a property name:
js
this.$watch('a', (newVal, oldVal) => {})
Watch a dot-delimited path:
js
this.$watch('a.b', (newVal, oldVal) => {})
Using getter for more complex expressions:
js
this.$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) => {}
)
Stopping the watcher:
```js const unwatch = this.$watch('a', cb)
// later... unwatch() ```
- See also
- Options -
watch - Guide - Watchers
$emit()#
Trigger a custom event on the current instance. Any additional arguments will be passed into the listener's callback function.
- Type
ts
interface ComponentPublicInstance {
$emit(event: string, ...args: any[]): void
}
- Example
js
export default {
created() {
// only event
this.$emit('foo')
// with additional arguments
this.$emit('bar', 1, 2, 3)
}
}
-
See also
emitsoption
$forceUpdate()#
Force the component instance to re-render.
- Type
ts
interface ComponentPublicInstance {
$forceUpdate(): void
}
- Details
This should be rarely needed given Vue's fully automatic reactivity system. The only cases where you may need it is when you have explicitly created non-reactive component state using advanced reactivity APIs.
$nextTick()#
Instance-bound version of the global nextTick().
- Type
ts
interface ComponentPublicInstance {
$nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void>
}
- Details
The only difference from the global version of nextTick() is that the callback passed to this.$nextTick() will have its this context bound to the current component instance.
- See also
nextTick()