How to call parent method inside a javascript child class

Question

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!!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super — zero298, Sep 08 '20 at 20:43
Does this answer your question? [What does calling super() in a React constructor do?](https://stackoverflow.com/questions/40433463/what-does-calling-super-in-a-react-constructor-do) — zero298, Sep 08 '20 at 20:44

score 2 · Accepted Answer · answered Sep 08 '20 at 21:05

2

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
  }

}

answered Sep 08 '20 at 21:05

dalmo

443
3
11

Exactly. Somewhat like this. Do you have any suggestions along with this? – mx_code Sep 08 '20 at 21:17
Glad it helped. As for suggestions, I'm not really familiar with Vue, sorry... Honestly, even though my answer worked, I probably wouldn't do that. I'd consider refactoring the code in a way better suited for the framework. – dalmo Sep 08 '20 at 21:44

score 0 · Answer 2 · answered Sep 08 '20 at 20:50

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

Thank you for your reply. But here I'm defining the Rect class inside the vue component itself. & the vue component doesn't have a name here. It is just ```export default``` -> no name... — mx_code, Sep 08 '20 at 20:56

score 0 · Answer 3 · edited Jul 15 '22 at 02:04

0

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

edited Jul 15 '22 at 02:04

tony19

125,647
18
229
307

answered Sep 08 '20 at 21:11

Michael Rush

3,950
3
27
23

No. This is not a bout child component. This is about creating a class which is not a component inside a vue component class. @dalmo3 has somewhat similar answer. – mx_code Sep 08 '20 at 21:16
Ah ok, I see. I misunderstood the "call methods of the parent component" thinking it was a child component. – Michael Rush Sep 08 '20 at 21:22

How to call parent method inside a javascript child class

3 Answers3