Vue JS Project Components 3 — Questions and Answers
Question 1: How do you pass data from a parent to a child component?
- Through props (Correct answer)
- Through emits
- Through slots only
- Through the store automatically
Correct answer: Through props
Props are the mechanism for passing data downward from parent to child.
Question 2: Which option declares the events a component can emit?
- emits (Correct answer)
- events
- signals
- dispatch
Correct answer: emits
The emits option documents and validates the custom events a component fires.
Question 3: What is the purpose of a slot in a component?
- To let parents inject custom content into the child (Correct answer)
- To define reactive data
- To register child components
- To scope CSS
Correct answer: To let parents inject custom content into the child
Slots provide a placeholder where the parent can pass in template content.
Question 4: How does a child notify its parent that something happened?
- By calling $emit with an event name (Correct answer)
- By mutating the parent's data directly
- By returning a value from data()
- By importing the parent
Correct answer: By calling $emit with an event name
Children use $emit to fire events that parents listen for with v-on.
Question 5: What is a named slot used for?
- Targeting specific outlets when a component has multiple slots (Correct answer)
- Naming a component file
- Declaring props
- Defining computed values
Correct answer: Targeting specific outlets when a component has multiple slots
Named slots let a component expose multiple distinct content outlets identified by name.
Question 6: Why should props be treated as read-only inside a child component?
- Mutating props breaks one-way data flow and triggers warnings (Correct answer)
- Props are encrypted
- Props are functions
- Props cannot be read
Correct answer: Mutating props breaks one-way data flow and triggers warnings
Vue enforces one-way data flow, so children should not mutate props directly.
Question 7: Which directive listens for a custom event emitted by a child?
- v-on (@) (Correct answer)
- v-bind (:)
- v-model
- v-slot
Correct answer: v-on (@)
v-on, shorthand @, attaches a handler to listen for emitted events.
Vue JS Project Components 3
How do you pass data from a parent to a child component?