component instance

39 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

$data component property

$data is an object returned from the data option, made reactive by the component. The component instance proxies access to the properties on its data object. Type: object. All properties on component instances are readonly except nested properties in $data.

$props component property

$props is 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. Type: object.

$el component property

$el is the root DOM node that the component instance is managing. Type: any. $el will be undefined until the component is mounted. For components with a single root element, $el will point to that element. For components with text root, $el will point to the text node. For components with multiple root nodes, $el will 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). Using template refs for direct access to elements is recommended over relying on $el.

$options component property

$options is the resolved component options used for instantiating the current component instance. Type: ComponentOptions. The $options object exposes the resolved options for the current component and is the merge result of global mixins, component extends base, and component mixins. It is typically used to support custom component options.

$parent component property

$parent is the parent instance, if the current instance has one. It will be null for the root instance itself. Type: ComponentPublicInstance | null.

$root component property

$root is the root component instance of the current component tree. If the current instance has no parents this value will be itself. Type: ComponentPublicInstance.

$slots component property

$slots is an object representing the slots passed by the parent component. Type: { [name: string]: Slot } where Slot = (...args: any[]) => VNode[]. 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. Typically used when manually authoring render functions, but can also be used to detect whether a slot is present.

$refs component property

$refs is an object of DOM elements and component instances, registered via template refs. Type: { [name: string]: Element | ComponentPublicInstance | null }.

$attrs component property

$attrs is an object that contains the component's fallthrough attributes. Type: object. 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.

$watch() component method signature and options

$watch(source: string | (() => any), callback: WatchCallback, options?: WatchOptions): StopHandle. WatchCallback<T> = (value: T, oldValue: T, onCleanup: (cleanupFn: () => void) => void) => void. WatchOptions interface: immediate (boolean, default: false), deep (boolean, default: false), flush ('pre' | 'post' | 'sync', default: 'pre'), onTrack (optional, (event: DebuggerEvent) => void), onTrigger (optional, (event: DebuggerEvent) => void). StopHandle = () => void.

$watch() first argument usage

The first argument to $watch() is the watch source. It can be a component property name string, a simple dot-delimited path string, or a getter function.

$watch() options: immediate, deep, flush

immediate option: trigger the callback immediately on watcher creation. Old value will be undefined on the first call. deep option: force deep traversal of the source if it is an object, so that the callback fires on deep mutations. flush option: adjust the callback's flush timing ('pre', 'post', or 'sync').

$watch() example: watch property name

Example of watching a property name: this.$watch('a', (newVal, oldVal) => {})

$watch() example: watch dot-delimited path

Example of watching a dot-delimited path: this.$watch('a.b', (newVal, oldVal) => {})

$watch() example: watch with getter function

Example of using getter for more complex expressions: this.$watch(() => this.a + this.b, (newVal, oldVal) => {}). This watches as if a computed property was defined without actually defining the computed property itself.

$watch() example: stopping watcher

Example of stopping a watcher: const unwatch = this.$watch('a', cb); unwatch()

$emit() component method signature

$emit(event: string, ...args: any[]): void. Trigger a custom event on the current instance. Any additional arguments will be passed into the listener's callback function.

$emit() examples

Examples of $emit: this.$emit('foo') for only event; this.$emit('bar', 1, 2, 3) with additional arguments.

$forceUpdate() component method

$forceUpdate(): void. Force the component instance to re-render. This should be rarely needed given Vue's fully automatic reactivity system. The only cases where it may be needed is when explicitly created non-reactive component state using advanced reactivity APIs.

$nextTick() component method signature

$nextTick(callback?: (this: ComponentPublicInstance) => void): Promise<void>. Instance-bound version of the global nextTick(). 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.

this.$host options API property

this.$host is an Options API property available in Vue 3.5+ that exposes the host element of the current Vue custom element.

Component definition in SFC with Options API

In a Single-File Component (.vue file) using the Options API, a component is defined with a <script> section containing export default with a data() function returning the component state, and a <template> section with the HTML markup. Example: export default { data() { return { count: 0 } } }.

Component definition in SFC with Composition API

In a Single-File Component (.vue file) using the Composition API with <script setup>, components are defined by importing reactive functions and declaring variables directly in the script section. The <template> section accesses these variables directly. Example: import { ref } from 'vue'; const count = ref(0).

Component definition without build step

When not using a build step, a Vue component can be defined as a plain JavaScript object with Vue-specific options, including a data() function or setup() function, and a template property containing an inlined JavaScript string or an ID selector pointing to a template element.

Component registration with Options API

In the Options API, a component must be registered in the parent component using the components option, passing an object with keys as tag names and values as component definitions. After registration, the component is available as a tag in the template using the registered key.

Component registration with Composition API and script setup

In the Composition API with <script setup>, imported components are automatically made available to the template without requiring explicit registration.

Component tag naming convention in SFC

In Single-File Components, it is recommended to use PascalCase tag names for child components to differentiate them from native HTML elements. SFC is a compiled format that supports case-sensitive tag names and the /> self-closing syntax.

Component tag naming in in-DOM templates

When authoring templates directly in the DOM (e.g., as content of a native <template> element), components must use kebab-case tag names and explicit closing tags, as the browser's native HTML parsing is case-insensitive and only allows specific elements to self-close.

Component instance isolation

Each time a component is used, a new instance of it is created. This means each instance maintains its own separate state, and changes to state in one instance do not affect other instances.

Props declaration with Options API

In the Options API, props are declared using the props option, which accepts an array of prop names or an object with detailed configuration. When a value is passed to a prop, it becomes a property on the component instance and is accessible in the template and on the this context.

Props declaration with Composition API

In the Composition API with <script setup>, props are declared using the defineProps() compile-time macro, which takes an array of prop names or a detailed configuration object. defineProps() returns an object containing all props passed to the component, allowing access in JavaScript. defineProps is only available inside <script setup> and does not need to be imported.

Props access in Composition API without script setup

When using the Composition API without <script setup>, props are declared using the props option and passed to setup() as the first argument, allowing access as an object property.

Dynamic prop binding syntax

Props are passed from parent to child component using the v-bind directive or colon syntax (:propName="value"). This is especially useful when passing dynamic values determined at runtime, such as values from v-for loops or parent component state.

Component event emission with $emit

A component emits custom events by calling the built-in $emit method, passing the event name as the first argument. The parent component listens to these events using v-on or @ directive, just like native DOM events.

Emits declaration with Options API

In the Options API, emitted events can be optionally declared using the emits option, which accepts an array of event names or an object with detailed configuration. This documents all events a component emits, enables event validation, and prevents Vue from implicitly applying events as native listeners to the component's root element.

Emits declaration with Composition API

In the Composition API with <script setup>, emitted events are declared using the defineEmits() compile-time macro. defineEmits() returns an emit function equivalent to $emit, which can be used to emit events in the <script setup> section. defineEmits is only available inside <script setup> and does not need to be imported.

Emits access in Composition API without script setup

When using the Composition API without <script setup>, emitted events are declared using the emits option. The emit function is accessed as a property of the setup context (passed to setup() as the second argument) via ctx.emit().

Case insensitivity in in-DOM templates

When writing Vue templates directly in the DOM, HTML tags and attribute names are case-insensitive. PascalCase component names, camelCased prop names, and camelCased v-on event names must use their kebab-cased (hyphen-delimited) equivalents.

Self-closing tags in in-DOM templates

In in-DOM templates, all elements must include explicit closing tags. Self-closing syntax (e.g., <component />) only works in Vue's compiled template parser. In-DOM templates must follow HTML spec rules where only specific elements like <input> and <img> can omit closing tags; omitting closing tags on other elements causes the browser HTML parser to close them unexpectedly.

Give your agent this brain