Higher-order components concept in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a higher-order component that wraps a base component.

Vue

<script setup>
import BaseComponent from './BaseComponent.vue'

const withWrapper = (Component) => {
  return {
    components: { Component },
    template: `<div class=\"wrapper\"><[1] /></div>`
  }
}

const WrappedComponent = withWrapper(BaseComponent)
</script>

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

AwithWrapper

BBaseComponent

CComponent

Dwrapper

Attempts:

3 left

💡 Hint

Common Mistakes

Using the base component name instead of the parameter 'Component'.

Using the wrapper class name instead of the component name.

The higher-order component returns a new component that renders the passed Component inside a wrapper div. The blank should be filled with Component to render it.

2fill in blank

medium

Complete the code to pass props from the higher-order component to the wrapped component.

Vue

<script setup>
import BaseComponent from './BaseComponent.vue'

const withWrapper = (Component) => {
  return {
    components: { Component },
    props: ['msg'],
    template: `<div class=\"wrapper\"><Component :msg=[1] /></div>`
  }
}

const WrappedComponent = withWrapper(BaseComponent)
</script>

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

Amsg

B$props.msg

Cprops.msg

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using an undefined variable like 'message' instead of 'msg'.

Trying to access props with '$props' which is not available in this template syntax.

The higher-order component receives a prop named msg and passes it down to the wrapped component using :msg="msg". The blank should be filled with msg to bind the prop correctly.

3fill in blank

hard

Fix the error in the higher-order component by completing the code to correctly define the component's setup function.

Vue

<script setup>
import BaseComponent from './BaseComponent.vue'

const withWrapper = (Component) => {
  return {
    components: { Component },
    setup() {
      const message = 'Hello from HOC'
      return { [1] }
    },
    template: `<div><Component :msg=\"message\" /></div>`
  }
}

const WrappedComponent = withWrapper(BaseComponent)
</script>

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

Aprops.message

B{ message }

Creturn message

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the variable directly instead of an object.

Trying to access props.message which is not defined here.

The setup function must return an object with the properties to expose to the template. Returning { message } exposes the message variable.

4fill in blank

hard

Fill both blanks to create a higher-order component that adds a click counter to the wrapped component.

Vue

<script setup>
import BaseButton from './BaseButton.vue'
import { ref } from 'vue'

const withClickCounter = (Component) => {
  return {
    components: { Component },
    setup() {
      const count = ref(0)
      const increment = () => count.value++
      return { count, [1] }
    },
    template: `<div><Component @click=[2] :count=\"count\" /></div>`
  }
}

const EnhancedButton = withClickCounter(BaseButton)
</script>

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

Aincrement

Bcount

Cincrement()

DincrementCount

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the count variable instead of the increment function.

Calling the function in the template instead of passing the function reference.

The setup function returns increment to expose the click handler. The template binds the @click event to increment to increase the count.

5fill in blank

hard

Fill all three blanks to create a higher-order component that logs a message when the wrapped component is mounted and passes a prop.

Vue

<script setup>
import { onMounted } from 'vue'
import BaseCard from './BaseCard.vue'

const withLogger = (Component) => {
  return {
    components: { Component },
    props: ['title'],
    setup(props) {
      const title = props.title
      onMounted(() => {
        console.log([1])
      })
      return { [2] }
    },
    template: `<div><Component :title=[3] /></div>`
  }
}

const LoggedCard = withLogger(BaseCard)
</script>

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

A'Component mounted!'

Btitle

Cprops.title

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the prop instead of a string message.

Returning props.title instead of the prop name.

Binding the prop incorrectly in the template.

The onMounted hook logs a message string. The setup returns title to expose the prop. The template binds the title prop to the wrapped component.