CODEWITHSUNDEEP
javascriptvue.js
mx_code
mx_code

Reputation: 2517

How to call parent method inside a javascript child class

Following is the code for a vue component js file.

(assuming that the vue component js file is a Class)

export default { -----> this is the parent, it is a component & it doesn't have a name!
  name: "mapping",
  components: {},
  props: ["data"],
  data() {
},
methods: {
parentMethod() {} ---->> this is the parent method. I want to call this inside the Rect class
},

mounted() {

class Rect { -----> this is the child class, 
constructor() {
this.parentMethod() // -> this is the parent method. how can I do this?
}

// call parent methods (i.e. component's) inside this class

//or something like this.

this.parentMethod() // -> this is the parent method. how can I do this?

}


}

As you can see I'm creating a class called Rect inside the mounted hook inside the vue js component class.

What I want is to call methods of the parent component inside this Rect class.

How can I achieve that?

UPDATE

I'm not extending the parent component class inside itself. I'm just defining a new class called Rect inside the parent component class. So I don't think I can call super(). Not sure though!!

UPDATE As I go through answers, I came to see that most of them suggests extending the class. But here the parent class doesn't have a name. It's just export default {} in vue.

& also I'm not sure whether I will be able to extend a parent inside itself to create a new class within inside itself.

NOTE

The requirement is to call the parent method from/inside a class which is the child of parent class (ie defined within the parent => defined within the parent body) Hope that makes sense!!

Upvotes: 2

Views: 402

Answers (3)

Michael Rush
Michael Rush

Reputation: 4340

In Vue you want to emit events from child components that are handled by the parent component rather than calling parent component methods directly from the child.

See https://v2.vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

Upvotes: 0

dalmo
dalmo

Reputation: 443

When you create a new class you change who this is inside that class. So you need to give that class a reference to its parent:


mounted() {
  const parentRef = this; // reference to the parent instance

  class Rect { 
    constructor() {
      parentRef.parentMethod() 
    }

    ...

    parentRef.parentMethod() // -> this is the parent method
  }

}

Upvotes: 2

sonEtLumiere
sonEtLumiere

Reputation: 4562

Check extends and super keywords:

//Inheritance
//Parent class (superclass)
class Animal {                            
  constructor(name) {           
    this._name = name;
    this._behavior = 0;
  }
  get name() {
    return this._name;
  }
  get behavior() {
    return this._behavior;
  }   
  incrementBehavior() {
    this._behavior++;
  }
} 

//Child class (subclass)
class Cat extends Animal {          // The extends keyword makes the methods of the animal class available inside the cat class.     
  constructor(name, usesLitter) {
    super(name);                    // The super keyword calls the constructor of the parent class.
    this._usesLitter = usesLitter;
  }
    get usesLitter() {
    return this._usesLitter;
  }
}
const bryceCat = new Cat('Bryce', true);
console.log(bryceCat.name);             //Output: Bryce
console.log(bryceCat.usesLitter);       //Output: true

Upvotes: 0

Related Questions