DEV Community

Mohamad Ashraful Islam
Mohamad Ashraful Islam

Posted on

Call super method in Vue Component

Pep Talk

So far (VueJS v2) we don't have class based component like react. *.vue has it's own syntax rather than traditional javascript. In that case have you ever feel about calling a method from mixin or another component? Okay!! Let me explain more.

What's already have?

In ES6 or more we have ability to write class even we have super method to call parent class method. Example is following...

// Defining Parent class in Javascript (ES6)
class Parent {
  getAge() {
    return 52
  }
}

// Defining Child class in Javascript (ES6)
class Child extends Parent {
  getAge() {
    const parentAge = super.getAge()
    // We will get parent ager here. And do further process
  }
}
Enter fullscreen mode Exit fullscreen mode

Have you felt that Vue Component is not allowing this?

Solution for Vue Component

There is a library for making this possible. Source Vue Super Call

How to use in your project?

  • Install it by npm install vue-super-call
  • Add your main.js/index.js (entry file of your project) like following,
import VueSuperMethod from 'vue-super-call'

Vue.prototype.$super = VueSuperMethod
Enter fullscreen mode Exit fullscreen mode

How to call super from method?

  • The basic syntax is this.$super(Mixin).yourMethod()
  • Proper example is following...
// This is mixin
export default {
    name: 'MyMixin',
    methods: {
        sayHello() {
            return "Hello"
        }
    }
}


// Your Component
export default {
    name: 'MyComponent',
    mixins: [MyMixin],
    methods: {
        sayHello() {
            let parentMethodData = this.$super(MyMixin).sayHello()
            console.log(parentMethodData)
            console.log('I am from component after super call')
        }
    }
}

// Console Output
$ Hello
$ I am from component after super call
Enter fullscreen mode Exit fullscreen mode

Have Fun with VueJS :)

Top comments (7)

Collapse
 
anduser96 profile image
Andrei Gatej

Thank you for sharing! I didn't know about that library, but in such cases I'd use the $parent property.

Example:

// myMixin.js
export default {
    methods: {
        sayHello () {
            console.log(this.message)
        }
    }
}
// Parent component
import myMixin from './path';
import Child from './ChildPath';

export default {
  mixins: [myMixin],
  components: { Child }
  data: () => ({
    message: 'hello from parent component!'
  })
}
// Child Component
export default {
  created () {
    this.$parent.sayHello();
    console.log('hello from child component!')
    /*
    hello from parent component!
    hello from child component!
    */
  }
}

Collapse
 
ashraful profile image
Mohamad Ashraful Islam

suppose you extended more than one mixin. And all the mixin have same method name. Is $parent will work?

Collapse
 
rhymes profile image
rhymes

No you can't, but if you control the mixins, isn't it easier to change the name of the methods?

Thread Thread
 
ashraful profile image
Mohamad Ashraful Islam

yeah, that's good I know. Thanks

Collapse
 
revel109 profile image
Abu Yusuf

Cool, Thanks for sharing. I was looking for something you did share here.

Collapse
 
ashraful profile image
Mohamad Ashraful Islam

Btw, it was written by me :p

Thread Thread
 
revel109 profile image
Abu Yusuf

Yes. I know that :D