Guide: Component Basics

Question 1

At it’s core, what is a component, and what does this mean?

Answer 1

A reusable Vue instances with a name that can be used as a custom element inside a root Vue instance, created with new Vue.

Means they accept the same options as new Vue since they are simply Vue instances. They don’t accept root-specific options like el though.

Question 2

Why must a component’s data option be a function?

Answer 2

So that each instance can maintain an independent copy of the returned data object.

Question 3

What two ways can components be registered?

Answer 3

Globally or locally.

Question 4

What are props? What must we do to make sure they’re accepted?

Answer 4

• They are custom attributes that you can register on a component
• We must include it in the list of props that the component will accept

Question 5

Let’s say we emit a custom value with an event from a child to parent. How do we do this and how do we access it?

Answer 5

• We emit it using the $emit’s 2nd parameter
• Handling inline
  
  • use $event: v-on:enlarge-text="bodyFontSize = $event"
• Handling with a string of a method name
  
  • the first parameter passed to the method will be the event

Question 6

What is input v-model="searchText" /\> equal to?

Answer 6

input :value="searchText" @input="searchText = $event.target.value"\>

Question 7

What is custom-input v-model="searchText"\>

What must happen in the component for this to work?

Answer 7

custom-input :value="searchText" @input="searchText = $event"\>

• Bind the value attribute to a value prop
• On input, emit its own custom input event with the new value

Question 8

How do we pass content to a componet, like a normal HTML element?

For example: alert-box\>Something happened /alert-box\>

Answer 8

Define a slot\>/slot\> element in the component.

Question 9

How can we utilize dynamic components?

Answer 9

• Use the is attribute of the component> element
• We can either pass in:
  
  • the name of a registered component
  • a component’s options object