Vue JS Project Components 2 — Questions and Answers
Question 1: Which option in a Vue component holds reactive state when using the Options API?
- data() (Correct answer)
- state()
- reactive()
- props()
Correct answer: data()
The data() function returns an object whose properties become reactive component state.
Question 2: How do you register a child component locally within a parent component?
- With the components option (Correct answer)
- With the imports option
- With the use() method
- With the register() hook
Correct answer: With the components option
Local registration is done by adding the component to the components option object.
Question 3: What is the recommended way to name a single-file component file?
- MyComponent.vue (PascalCase) (Correct answer)
- my_component.vue
- mycomponent.html
- Component.js
Correct answer: MyComponent.vue (PascalCase)
Vue style guide recommends PascalCase single-file component filenames ending in .vue.
Question 4: Which block of a single-file component contains the markup?
- <template> (Correct answer)
- <script>
- <style>
- <markup>
Correct answer: <template>
The <template> block holds the component's HTML markup.
Question 5: How can you scope CSS so it only applies to the current component?
- Add the scoped attribute to <style> (Correct answer)
- Use a <local> tag
- Set style: 'scoped' in options
- Wrap CSS in a function
Correct answer: Add the scoped attribute to <style>
Adding scoped to the <style> tag limits the styles to that component's elements.
Question 6: What does a component need to do to be reusable across many parts of an app?
- Accept props and emit events instead of relying on global state (Correct answer)
- Hard-code all its data
- Avoid using a template
- Only use inline styles
Correct answer: Accept props and emit events instead of relying on global state
Reusable components take inputs via props and communicate out via emitted events.
Question 7: Which directory commonly holds shared UI components in a Vue project?
- src/components (Correct answer)
- src/assets
- public
- node_modules
Correct answer: src/components
By convention reusable components live in the src/components directory.
Vue JS Project Components 2
Which option in a Vue component holds reactive state when using the Options API?