Single File Components

  • Single File Components

    Very similar to native HTML elements, Vue allows us to create custom elements using its own component model.

    Test your knowledge on Single File Components of Vue 3.

    12 Questions

  • Single File Components

    Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation. It's common for an app to be organised into a tree of nested components.

    Single file components - aka SFC - encapsulate custom content and login in them, and are mostly made up of script, template and style tags with .vue file extension.

    When SFCs are not using build step, they can be written as a plain JavaScript object - but only using Vue-specific options - in .js file extension.

  • 2

    Key elements

    What is the purpose of a Single File Component (SFC) in Vue.js?

  • 3

    ref & reactive

    What is the purpose of the ref and reactive function in the Composition API?

  • 4

    defineProps

    How do you access component props, title, inside JavaScript section of the Vue 3 component?

  • 5

    defineEmits

    `defineEmits` is a compile-time that is only available inside <> and does not need to be imported explicitly. defineEmits returns an `emit` function which is equivalent to `$emit` method.
  • 6

    In-built directives

    Select all valid in-built directives from the following list.

  • Special in-built directives

    v-memo: Skips updating a subs-tree of the template when the values of supplied array items remain unchanged.

    v-once: Renders the element and component once only, and skip future updates.

    v-pre: Skips compilation for an element and all its children.

    v-cloak: Used to hide un-compiled template until it is ready.

    v-cloak in <style> tag:

    [v-cloak] { 
  display: none; 
}
  • 8

    Directive: v-on

    Which of the following statements are true for v-on directive?

  • 9

    Slot

    <slot> is a built-in component provided by Vue. Which of the following statements are true for custom element <slot>?

  • 10

    Directive: v-slot

    What does v-slot:item indicate in the code sample below?

    <InfiniteScroll> 
  <template v-slot:item="slotProps"> 
   <div class="item"> 
    {{ slotProps.item.text }} 
   </div> 
  </template> 
 </InfiniteScroll>
  • 11

    Directive: v-for

    v-for directive is used to render the element or template block multiple times based on the given data. Select all acceptable data types for v-for directive.

  • 12

    Directive: v-model

    v-model is used to create a two-way binding on a form input element or a component. Which of the following elements are applicable for v-model directives?

  • 13

    v-if vs v-show

    In Vue template, is used to conditionally render an element or a template fragment based on the truthy-ness of the expression value, while toggles the element’s visibility based on the truthy-ness of the expression value.

  • Dynamic Component

    Sometime the required component to render is not known upfront, or you may need to switch between components. For such use-cases, Vue provided in-built component called <component> which accepts :is props. :is props can accept:

    • the name string of a registered component, OR
    • the actual imported component object
    <component :is="tabs[currentTab]"> 
</component>
  • 15

    Dynamic Component

    When switching existing component with a new component using <component :is="">, the existing component is unmounted and become inactive when it is switched with the new component. How can you force this inactive component to stay alive?