Components

Question 1

Registration

Answer 1

Global Registration

• Vue.component(tagName, options)
• should adhere to W3C custom tag names (all lowercase, must contain a hyphen)

Local Registraion

• Instead of global registration, inside of root or component class, define it in components: {} option

Question 2

Components

Answer 2

• Naming should adhere to W3C custom tag names (all lowercase, must contain a hyphen)
• If DOM Template Parsing, ul, ol, table, and select can only contain certain elements, and option can only appear inside certain elements
  
  • use |
    | |
    as a workaround
  • Limitations don’t apply if using

    , JS inline template strings, or .vue components</li>

  </ul>
  </li><li>For components, data option must be a function that returns an object</li><li>Props down, events up. Props passed down to the child, events emitted up to the parent</li>

</ul>
</script>

Question 3

Props

Answer 3

Overview

• Every componet instance has isolated scope
• Do not reference parent data in a child template
• kebab-case in HTML will get translated to camelCase in JS
• Can pass entire object to child by leaving out prop name
  
  • • Literal props pass down strings, dynamic props are JS evaluated

Usage

• Don’t mutate actual prop value once in child, whenever initial value needs to change nor if it needs to be transformed. Solutions:
  
  • with a prop of initialCounter, and in the data option: return {counter: this.initialCounter} and use this.counter from then on
  • Use a computed property that will continually watch for changes to initial prop
• Arrays and objects are passed by reference, be sure to use spread syntax on local values to break reference

Validation

// Basic type checking of propApropA: Number// Multiple possible typespropB: [Number, Array]// An object of validation: a required stringpropC: {type: String, required: true, default="world"}// Object/Array defaults should be returned from factory with validationfunction propD: {type: Object, default() => ({message: "hello"}), validator(value) => value > 10 }

• type can be String, Number, Boolean, Function, Object, Array, and Symbol
• Props are validated before a component instance is created
  
  • data, computed, and methods not available in default and validator methods

Non-Prop Attributes

• Props not explicity defined in the child component for acceptance will instead be placed on the root element as an attribute plus it’s value
• Attributes passed in will overwrite those defined on root element
  
  • class and style attributes are smart and will combine the values from both places

_{Research type can be custom constructor function & assertion will be made with an instanceof check}

Question 4

Custom Events

Answer 4

v-on

• every instance implements an events interface
  
  • ​can listen to an event using $on(eventName)
  • can trigger an event using $emit(eventName)
    *