[Vuejs]-How to specify when a Vue Component has extra functionality?

by

0👍

✅

You can achieve this by using props that you pass while calling that component. That prop could be anything you need. Here is a small example with simple true/false prop:

// Set the prop in your called component, in this case a boolean
props: {
    myBoolean: Boolean
  }

// Passing the prop from your parent to the component, where it has to be a property, in this case called myBooleanFromParent

<my-component :myBoolean="myBooleanFromParent"></my-component>

// In your component your template changes according to the passed prop from your parent
<template>
  <div>
    <div v-if="myBoolean">
      If myBoolean is true
    </div>
    <div v-else>
      Else, so if myBoolean is false
    </div>
  </div>
</template>

This is, as stated, a small and simple example. You can pass any kind of data with props. It could also be a object full of data to handle multiple conditions.

Leave a comment