Component Instance | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
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).
The object returned from the data option, made reactive by the component. The component instance proxies access to the properties on its data object.
An object representing the component's current, resolved props.
Only props declared via the props option will be included. The component instance proxies access to the properties on its props object.
The root DOM node that the component instance is managing.
$el will be undefined until the component is mounted.
For consistency, it is recommended to use template refs for direct access to elements instead of relying on $el.
The resolved component options used for instantiating the current component instance.
The $options object exposes the resolved options for the current component and is the merge result of these possible sources:
It is typically used to support custom component options:
See also app.config.optionMergeStrategies
The parent instance, if the current instance has one. It will be null for the root instance itself.
The root component instance of the current component tree. If the current instance has no parents this value will be itself.
An object representing the slots passed by the parent component.
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
An object of DOM elements and component instances, registered via template refs.
An object that contains the component's fallthrough attributes.
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.
Imperative API for creating watchers.
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.
Watch a property name:
Watch a dot-delimited path:
Using getter for more complex expressions:
Stopping the watcher:
Trigger a custom event on the current instance. Any additional arguments will be passed into the listener's callback function.
Force the component instance to re-render.
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.