Component Inheritance with vue js

by

You should use Mixins to add common functionality to multiple (or all of your) components: https://v2.vuejs.org/v2/guide/mixins.html

This will let you add the same functions to any or all of your components, so you can automatically add this.foobar() to your components.

If you want to add functionality to all of your components without polluting your component namespace, you can use a custom plugin: https://vuejs.org/guide/plugins.html

This will let you add a service to all of your components so you can use it everywhere like this.$service.foobar().

If you want to work with CRUD functionality, you should create a resource using VueResource: https://github.com/vuejs/vue-resource/blob/master/docs/resource.md

This will let you easily create/delete/edit resources using FoobarService.create({foo: 'bar'}) or FoobarService.delete({id: 1})

Edit: to create a plugin, it will look something like this:

var MyPlugin = {};

MyPlugin.install = function (Vue, options) {

  var service = {
    foo: function(bar) {
      //do something
    }
  }

  Vue.prototype.$service = service;
}

Vue.use(MyPlugin); //this runs the install function

//Then when you have any Vue instance
this.$service.foo(bar);

Leave a Comment