• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Create Reusable Components in Vue.js

Log in or subscribe for free to enjoy all this course has to offer!

Evaluated skills

  • Create reusable components in Vue.js
  • Question 1

    If you want to pass data down to a child component, which technique should you use?

    • Computed properties

    • Methods

    • Props

    • Data store

  • Question 2

    There is currently a bug in the app where a component is showing different data types in the message such as arrays and objects.

    <template>
    <p>{{ message }}</p>
    </template>
    <script>
    export default {
    props: ['message']
    }
    </script>

    What is the best way to prevent this bug from occurring?

    • Define the  required  property on the prop.

       

    • Define the type property with a value of  String.

       

    • Set a default data property on the prop.

    • Define a custom prop name that tells other developers to only use strings.

  • Question 3

    A developer is trying to use SCSS techniques in the following block of code.

    <template>
    <div class="form-wrapper">
    <label class="form-label">Form Label</label>
    <input class="form-input" type="text" />
    </div>
    </template>
    <style>
    .form {
    &-wrapper { margin: 25px 0; }
    &-label { font-size: 1.2rem; }
    &-input { padding: 10px 5px; }
    }
    </style>

    What are they doing wrong?

    • They need to add the scss attribute to the <style> block.

       

    • They need to add the lang="scss" attribute to the <style> block.

       

    • They need to wrap the styles in <scss> block.

       

    • They need to add preprocessor="scss" attribute to the <style> block.