CODEWITHSUNDEEP
javascriptvue.js
Armin
Armin

Reputation: 2141

Is it a good practice to do something based on other components name in Vue.js?

Is it considered a good practice to set a condition and run some code based on other component's name?

For example I have a reusable child component, and want one of it's methods to stop and not run when it is rendered as a child of a specific component, so I would have something like this inside that method:

   methodName() {
     if(this.$parent.$options.name == 'someSpecificName')
     {
        // prevent rest of the function if child of specific component
        return;
     }
     else {
        // continue the function when rendered inside other components
     }
   }

EDIT: So to further clarify my question, I have a method inside the child component than runs normally when the particular event is fired, but what I want to do is prevent that method when it is being rendered inside of a specific parent component.

Upvotes: 1

Views: 61

Answers (1)

Kris D. J.
Kris D. J.

Reputation: 72

I would instead set a Boolean prop in the child component and make the method fire, if that prop is set to true.

Example:

// Child component
props: {
  runSomeMethod: {
     type: Boolean,
     default: false
  }
},
mounted() {
   if (this.runSomeMethod) {
     this.functionToRun();
   }
}
methods: {
   functionToRun() {
      // some code
   }
}

// Parent
<template>
  <child-component
    :run-some-method="true">
  </child-component>
</template>

Upvotes: 2

Related Questions