Vue JS Components and Props 1 — Questions and Answers

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

props: { title: String } (Correct answer)
props: [title: String]
data() { return { title: String } }
computed: { title: String }

Correct answer: props: { title: String }

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.

In Vue 3's Options API, the `props` option accepts either an array of prop names for simple declarations or an object for type-validated declarations. `props: { title: String }` tells Vue to expect a prop named `title` of type `String`. Vue will warn in the console if the passed value doesn't match the declared type. For more complex validation you can use `{ type: String, required: true, default: 'Hello' }`.

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

defineProps (Correct answer)
useProps
ref
reactive

Correct answer: defineProps

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

`defineProps` is a compile-time macro available only inside `<script setup>` blocks. It does not need to be imported. You can pass it a runtime object like `defineProps({ count: Number })` or use TypeScript generics like `defineProps<{ count: number }>()`. The returned object contains the reactive props. Unlike the Options API, props declared this way are automatically available as read-only bindings.

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

:title="pageTitle" (Correct answer)
title="pageTitle"
v-prop:title="pageTitle"
bind-title="pageTitle"

Correct answer: :title="pageTitle"

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

Static prop values use plain HTML attributes: `title="Hello"`. To bind a prop to a JavaScript variable or expression, you use `v-bind:title="pageTitle"` or the shorthand `:title="pageTitle"`. Vue evaluates the expression inside the quotes as JavaScript, so the variable `pageTitle`'s current value is passed as the prop. Without the colon, `title="pageTitle"` passes the literal string `"pageTitle"`.

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

Props flow from parent to child; child should not mutate them (Correct answer)
Props flow from child to parent using v-model
Parent and child can both mutate shared props
Props are automatically two-way bound

Correct answer: Props flow from parent to child; child should not mutate them

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

Vue's one-way data flow principle means that all props form a one-way-down binding between parent and child components. When the parent updates a prop, the child's value refreshes, but child components must not directly mutate props. If the child needs to change the value, it should either emit an event for the parent to handle or create a local copy with `ref` or `reactive` initialized from the prop. This keeps the data flow predictable and easy to debug.

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

Prevents non-prop attributes from being automatically applied to the root element (Correct answer)
Stops the component from receiving any props
Disables prop type checking
Removes the component from the virtual DOM

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

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's attribute inheritance feature automatically applies attributes passed to a component (that are not declared as props or emits) to the component's root element. Setting `inheritAttrs: false` in the component options disables this behavior. You can then use the `$attrs` object (or `useAttrs()` in Composition API) to manually bind those attributes to a specific element, which is useful when the root element is a wrapper rather than the intended target.

Question 6: How do you validate that a prop is required and is of type Number in Vue 3?

props: { count: { type: Number, required: true } } (Correct answer)
props: { count: Number! }
props: { count: [Number, required] }
required props: { count: Number }

Correct answer: props: { count: { type: Number, required: true } }

Vue's prop validation uses an object with `type` and `required` keys. `{ type: Number, required: true }` ensures the prop must be passed and must be a number.

Vue 3 allows detailed prop validation by using an object instead of a bare type. The validation object supports `type` (constructor or array of constructors), `required` (boolean), `default` (value or factory function), and `validator` (custom function returning boolean). For example: `props: { count: { type: Number, required: true } }` will log a Vue warning if the `count` prop is missing or not a number at runtime.

Vue JS Components and Props 1

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