Component Interface

Call defineEmits(['confirm']) at the top level of script setup, keep the returned emit function and call emit('confirm', id). The parent listens with v-on, @confirm="handler", and the handler receives the extra arguments.

Undeclared attributes and v-on listeners are fallthrough attributes: Vue adds them to the component's single root element, merging class and style with the root's own values and running both listeners.

defineProps is a script setup compiler macro that declares props with either a runtime argument (a names array, or options with type, required, default and validator) or a TypeScript type argument compiled into runtime options; one call cannot take both.

Vue's app.component() registers a component app-wide, so any template can use it without importing, but it always ships in the bundle. A local import in script setup is visible only in that file and tree-shakes cleanly, so it is the default.

Vue's child declares outlets such as <slot name="toolbar">, and the parent targets them with <template #toolbar> (short for v-slot:toolbar). Loose content goes to the default slot. Fallback content inside <slot> renders when the parent provides nothing usable.

On a component, v-model="query" expands to a modelValue prop plus an onUpdate:modelValue listener that assigns the payload back to query. The child declares the prop and emits update:modelValue, or uses defineModel() since Vue 3.4.

Vue's emit only calls listeners the direct parent placed on that component, and events never bubble. OrderList must listen to DeleteButton and emit its own deleted, or the page reaches the value through provide/inject or a shared store.

Vue slot content is compiled in the parent's scope, so it cannot see the child's variables. The DataTable passes data as attributes on the outlet, <slot name="cell" :row="row" />, and the parent receives them with <template #cell="{ row }">.

defineModel() is a script setup macro that declares a model prop, a matching modifiers prop and an update:<name> event, and returns a ref: reads follow the prop, writes emit the update and keep a local value only when no parent v-model is bound.

Reassigning a prop is blocked with a warning in development builds, but mutating a nested field such as props.user.name is not caught and silently changes the parent's object. Fix it with a copied local draft, a computed, or an emitted event.

Vue's defineAsyncComponent wraps a loader returning a promise, usually a dynamic import, and calls it only when first rendered. loadingComponent shows after delay (200 ms default); errorComponent shows on rejection or when an optional timeout passes.

A string for Vue's :is resolves only registered component names, and script setup imports are not registered, so it renders an unknown native element. A component stored in ref() becomes a reactive proxy, which Vue warns about and unwraps.

An undeclared click listener falls through to the root button as a native listener, and the child's emit('click') calls the same handler again. Declaring click in defineEmits removes it from $attrs, so only the emitted event reaches it.

A multi-root, text or teleport root gives Vue no single element to put fallthrough attributes on, so it applies none and warns in development. Bind v-bind="$attrs" on the intended root, declare the prop or event, or set inheritAttrs: false.

useAttrs() returns an object that always holds the latest fallthrough attributes but is not reactive, so values copied in setup freeze and watchers cannot observe it. Declare a prop, read attrs during render, or use onUpdated.

A prop whose type includes Boolean is cast: absent becomes false instead of undefined unless a default is declared, and a bare attribute or a value equal to the kebab-case prop name becomes true. Any other string, including "false", is passed as that string.

A prop's options are defined once per component, so a literal object or array default would be one shared reference that every instance could mutate. A factory returns a fresh value per instance and runs only when the resolved value is undefined.

Vue only logs a console warning, and only in development builds; the value is still passed and the component renders. Production builds skip validation entirely. A validator receives the value and, since 3.4, the resolved props as a second argument.

A Vue SFC infers its name from its filename, so TreeItem.vue can render <TreeItem> in its own template without importing itself. An import with the same name takes priority; alias that import, and guard recursion with a condition on the children.

Check the slot in Vue's template, <div v-if="$slots.footer" class="footer"><slot name="footer" /></div>, or use useSlots() in script setup. It tells you a footer fragment was passed, not that it renders anything, and it is not reactive in script.

A v-model argument renames the prop and event, so v-model:start binds a start prop and update:start event. In the child, call defineModel('start') and defineModel('end'), or declare both props and both update events.

Vue async components are suspensible by default, so under a Suspense ancestor the boundary controls loading and the wrapper's loadingComponent, delay and timeout go unused. Set suspensible: false or rely on the fallback, then add timeout, errorComponent and a capped onError retry.

emit() returns nothing the child can await and is silently ignored once the component has unmounted. When the child needs the parent's result, such as a promise for a pending state, a function prop like onDelete fits better.

Fallthrough attributes land on the root label, where placeholder does nothing and focus never fires. Set inheritAttrs: false with defineOptions and bind v-bind="$attrs" on the input, deciding explicitly where class goes.

Vue logs Failed to resolve component when a template tag matches no import, local registration or app-level registration. Check that the using file imports it, that the global registration is on this app, that the registered spelling matches, and that it is not a custom element.

Either defineModel's default fills the child's prop while the parent's ref stays undefined, or the parent passes only :modelValue so the ref runs in local mode. Initialise the parent's value and bind the full v-model.

With the object syntax, each event maps to null or a function that receives the emit arguments and returns a boolean. A false result logs a development warning, but the event is still delivered, and production builds skip validators.

Vue matches a tag against registered names as written, camelized and capitalized, so a PascalCase registration answers to both <UserCard> and <user-card>. In-DOM templates are parsed by the browser first, which lowercases tags and ignores self-closing custom tags, so they need kebab-case and closing tags.

Modifiers reach the child as an object prop, modelModifiers for the default model. With defineModel, destructure [model, modifiers] and pass a set transformer that capitalises the value when modifiers.capitalize is true.