Component Basics


Vue Documentation: Component Basics (up to in-DOM Template Parsing Caveats)

  • What does SFC stand for?
  • What extension do we use for a SFC?
  • What are the 3 parts to a SFC?

 

  • Suppose we have a component named Button.  Create a component that inserts two instances of the Button component in its template.

 

  • What does a prop create for a component?
  • What macro do we call to define a prop?
  • What is passed to that macro?
  • What is returned by that macro?
  • How do you access the value of a prop in <script setup>?
  • How can the value of a prop be inserted as a text into a text node in the DOM?
  • How do we initialize a prop in a parent component?

 

  • Suppose a parent component has a function named enlargeText().  Suppose also that the parent has a child component named Button.  How can the parent execute the enlargeText() function when it receives an enlarge-text event from the Button component?
  • What macro do we call to define/document a custom event that a component is capable of emitting?
  • What are the arguments to that macro?
  • What does the macro return?
  • How can we emit a custom event in <script setup>?
  • How can we emit a custom event in <template>?

 

  • What Vue custom element can we use in a child component to accept arbitrary HTML from a parent component?

 

  • What Vue custom element can we use to insert a dynamically loaded child component?
  • What attribute is utilized to indicate which Vue component should be loaded in the dynamically loaded component?
  • What built-in Vue component can be used to keep an inactive dynamically loaded component in memory?