yoklainterview sim
ProgressHistory

Frontend Vue Components Props Interview Questions

75 verified Frontend Vue Components Props interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Vue Components PropsDifficulty 1
In Vue 3, how does a parent component pass data down to a child component?
  • aBy calling a method exposed by the child
  • bBy binding a prop on the child's tag, e.g. <Child :title="value" />✓
  • cBy importing the child's internal state directly
  • dBy mutating a shared global variable
Explanation:Props are the standard one-way data-passing mechanism from parent to child in Vue: the parent binds a value to an attribute on the child's tag, and the child declares that name in its props option (or defineProps) to receive it.
Vue Components PropsDifficulty 1
How does a child component notify its parent that something happened (e.g. a button was clicked)?
  • aBy directly calling a method defined in the parent's <script> block
  • bBy writing to window and letting the parent poll it
  • cBy emitting a custom event with emit('event-name'), which the parent listens to with @event-name✓
  • dBy returning a value from its setup() function
Explanation:Vue's standard child-to-parent communication is custom events: the child calls emit('event-name', payload) (declared via defineEmits), and the parent listens with @event-name="handler" on the child's tag.
Vue Components PropsDifficulty 2
<script setup>
const props = defineProps({
  count: { type: Number, default: 0 }
})
</script>
<template>
  <p>{{ count }}</p>
</template>

If the parent does NOT pass a count prop, what is rendered?
  • a0, because the default value is used when the prop is omitted✓
  • bundefined, since no default applies without explicit binding
  • cA runtime error, since count is required by default
  • dNaN, because Number types default to NaN when absent
Explanation:Vue's prop options support a default value that is used whenever the caller doesn't pass that prop at all. Since required isn't set here, omitting count is valid and Vue falls back to 0.
Vue Components PropsDifficulty 2
In a component's template, how should a prop named userName (camelCase) typically be written when passed from the parent's template?
  • aUserName, PascalCase always
  • bUSER_NAME, all caps
  • cuserName, camelCase must match exactly in templates too
  • duser-name, kebab-case, since HTML attributes are case-insensitive✓
Explanation:Because HTML attribute names are case-insensitive, Vue templates conventionally use kebab-case (user-name) for prop bindings even though the prop is declared in camelCase (userName) in the component's script. Vue automatically converts between the two.
Vue Components PropsDifficulty 2
<!-- Child.vue -->
<script setup>
const props = defineProps(['label'])
props.label = 'changed'
</script>

What happens when this line runs?
  • aIt silently updates the parent's original value too, since props are shared by reference
  • bIt works normally — props are just regular reactive variables the child can freely reassign
  • cVue emits a runtime warning because props are meant to be one-way; mutating them directly is discouraged/disallowed in dev mode✓
  • dIt throws a compile-time TypeScript error even in plain JavaScript projects
Explanation:Props flow one-way from parent to child. Vue's reactivity system treats a component's own props object as effectively read-only from the child's side — mutating a prop directly triggers a dev-mode warning ('Avoid mutating a prop directly') since the change won't propagate back and creates a false impression of two-way binding.
Vue Components PropsDifficulty 2
What does defineEmits do in a <script setup> component?
  • aIt defines the props the component accepts
  • bIt declares the component's public custom-event contract and optional event validation✓
  • cIt automatically emits every DOM event to the parent
  • dIt registers global event listeners on the window object
Explanation:defineEmits is a compiler macro that declares a component's public custom-event contract, optionally with validator functions. Vue can then validate emitted events and IDEs/type systems can provide accurate autocompletion and type checking. Calling emit() with an undeclared event is not a hard runtime prohibition; in development it can still run while Vue warns about the missing declaration.

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview