Vue Fundamentals — Series 2

Preview — 3 of 10 questions

What does this component do with the count prop if the parent doesn't pass one?

javascript

<script setup>
const props = defineProps({
  count: {
    type: Number,
    default: 0,
  },
})
</script>

<template>
  <p>{{ props.count }}</p>
</template>

AThe component throws a runtime error because count is required

Bprops.count is undefined until the parent passes a value

Cprops.count falls back to 0, the declared default — no warning is emitted since the prop isn't marked required

DVue automatically infers 0 as the default for any Number-typed prop, even without declaring it

What renders inside <Card> when the parent doesn't provide any child content?

javascript

<!-- Card.vue -->
<template>
  <div class="card">
    <slot>No content provided.</slot>
  </div>
</template>

ANothing renders inside .card — an empty slot renders as an empty string

BVue throws a compile error — <Card> must always have children

C"No content provided." renders — content placed between <slot> tags is the fallback used when the parent passes nothing

DThe <slot> element itself renders literally as text in the DOM

Which output is correct for this layout component?

javascript

<!-- Layout.vue -->
<template>
  <header><slot name="header" /></header>
  <main><slot /></main>
</template>

A<h1>Dashboard</h1> renders in both <header> and <main>, since no slot name was given to <p>

B<h1>Dashboard</h1> goes into <header> (named slot header); <p>Main content</p> goes into <main> (the unnamed default slot)

CEverything renders inside <main> — named slots require a v-slot directive on the root, not <template> blocks

DThis throws a compile error — a component can't mix a named slot and a default slot

Answer all 10 questions (7 more), see explanations for every answer, and track your score.