Functional components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a simple functional component in Vue 3.

Vue

<script setup>
import { [1] } from 'vue'

const HelloWorld = [1](() => {
  return <h1>Hello, Vue!</h1>
})
</script>

Drag options to blanks, or click blank then click option'

Aref

Breactive

CdefineComponent

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ref' or 'reactive' instead of 'defineComponent'.

Not importing anything from 'vue'.

In Vue 3, defineComponent is used to define components, including functional ones.

2fill in blank

medium

Complete the code to accept props in a Vue functional component.

Vue

<script setup>
import { defineComponent } from 'vue'

const Greeting = defineComponent((props) => {
  return <p>Hello, {props.[1]!</p>
})
</script>

Drag options to blanks, or click blank then click option'

Amessage

Bname

Ctitle

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a prop name not declared or passed.

Using 'message' or 'title' which are not defined props.

The prop name is used to display the greeting message.

3fill in blank

hard

Fix the error in the functional component that returns multiple root elements.

Vue

<script setup>
import { defineComponent } from 'vue'

const MultiRoot = defineComponent(() => {
  return (
    <div>
      <h1>Title</h1>
      [1]
    </div>
  )
})
</script>

Drag options to blanks, or click blank then click option'

A<span>Text</span>

B<p>Paragraph</p>

C<template></template>

D<div>Content</div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using fragments <> which Vue 3 does not support as root.

Using