https://github.com/rpkilby/vue-super

Vue.js plugin that allows you to reference methods on parent classes
https://github.com/rpkilby/vue-super

Last synced: 13 days ago
JSON representation

Vue.js plugin that allows you to reference methods on parent classes

• Host: GitHub
• URL: https://github.com/rpkilby/vue-super
• Owner: rpkilby
• License: mit
• Created: 2016-03-02T01:27:31.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-12-20T01:52:10.000Z (almost 5 years ago)
• Last Synced: 2024-10-12T07:27:23.914Z (29 days ago)
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 35
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - vue-super ★5

README

        
# vue-super

[![Build Status](https://travis-ci.org/rpkilby/vue-super.svg?branch=master)](https://travis-ci.org/rpkilby/vue-super)

[![codecov](https://codecov.io/gh/rpkilby/vue-super/branch/master/graph/badge.svg)](https://codecov.io/gh/rpkilby/vue-super)

[![Version](https://img.shields.io/npm/v/vue-super.svg)](https://www.npmjs.com/package/vue-super)

Provides a `$super` handler for accessing parent vue methods from a subclass.

Behaves similarly to python's super implementation.

> vue-super is tested against both vue@1 and vue@2

Example:

```js

const Parent = Vue.extend({

    methods: {

        doTheThing: function(){

            console.log('performing a parental action');

        },

    },

})

const Child = Parent.extend({

    methods: {

        doTheThing: function() {

            this.$super(Child, this).doTheThing();

            console.log('doing a childlike thing');

        },

    },

})

```

For convenience, methods are directly accessible on the `$super` object.

However, this behavior is only valid on a final subclass.

```js

const Final = Child.extend({

    methods: {

        doTheThing: function() {

            this.$super.doTheThing();

            console.log('doing the final thing');

        },

    },

})

```