Vue JS Components and Props

Question 1

How do you define a prop with a type validation in Vue 3 using the Options API?

Accepted Answer

props: { title: String }

Answer

In the Options API, props are defined as an object where each key maps to a type or a validation object. Using `props: { title: String }` enforces that `title` must be a string.

Question 2

Which keyword is used in Vue 3 Composition API to declare props inside `<script setup>`?

Accepted Answer

defineProps

Answer

`defineProps` is the compiler macro used inside `<script setup>` to declare component props without importing anything.

Question 3

What is the correct way to pass a dynamic prop value in a Vue template?

Accepted Answer

:title="pageTitle"

Answer

The `:title` shorthand for `v-bind:title` binds the prop to a JavaScript expression, making it dynamic.

Question 4

In Vue 3, which of the following best describes one-way data flow for props?

Accepted Answer

Props flow from parent to child; child should not mutate them

Answer

Vue enforces one-way data flow: props go from parent to child. The child must emit an event instead of mutating the prop directly.

Question 5

What does `inheritAttrs: false` do in a Vue 3 component?

Accepted Answer

Prevents non-prop attributes from being automatically applied to the root element

Answer

By default Vue applies non-prop attributes (fallthrough attributes) to the root element. Setting `inheritAttrs: false` prevents this so you can manually control where they land using `$attrs`.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Components and Props