javascript - How can I share a method between components in Vue.js? -

check out simple shopping cart demo:

http://plnkr.co/edit/cht2insrjaj6ows7xmip?p=preview

a user can pick veggie , fruit, , added cart array. function adds fruit/veggie similar, , want combine function can shared across both components.

    selectfruit: function(product){        var cart = this.cart        for(p in cart){        if (cart[p]["type"] == "fruit"){            console.log("we got fruit!, let's remove " + cart[p]["name"] + " , add in " + product["name"]);               this.cart.$remove(cart[p])              }             }             console.log("adding " + product.name + " cart.");             var productname = product.name             var cartfruit = {name: product.name, type: 'fruit'}             this.cart.push(cartfruit) }  selectveggie: function(product){     var cart = this.cart     for(p in cart){         if (cart[p]["type"] == "veggie"){            console.log("we got veggie!, let's remove " + cart[p]["name"] + " , add in " + product["name"]);            this.cart.$remove(cart[p])         }     }     console.log("adding " + product.name + " cart.");     var productname = product.name     var cartveggie = {name: product.name, type: 'veggie'}     this.cart.push(cartveggie) } 

how can make can alter method , have used globally? i'm using vue router project btw, help!

option 1

one approach sharing method across components use mixin. here's cartmixin contains selectproduct method:

var cartmixin = {   methods: {     selectproduct: function (product) {       var cart = this.cart       for(p in cart){           if (cart[p]["type"] == product.type){              console.log("we got "+ product.type +"!, let's remove " + cart[p]["name"] + " , add in " + product["name"]);              this.cart.$remove(cart[p])           }       }       console.log("adding " + product.name + " cart.");       var productname = product.name       var cartproduct = {name: product.name, type: product.type}       this.cart.push(cartproduct)     }   } }; 

you can reference in each component this:

var vegetable = vue.extend({     template: '#vegetable',     mixins: [cartmixin],     data: function(){         return sourceoftruth     } }) 

... , use in templates this:

<li v-for="product in food | showonly 'fruit'" @click="selectproduct(product)">   {{product.name}} </li> 

here's fork of plunker.

option 2

after thinking more, option might consider create base product component , extend create fruit , vegetable components. put common functionality in base component.

var product = vue.extend({   data: function(){       return sourceoftruth   },   methods: {     selectproduct: function (product) {       var cart = this.cart       for(p in cart){           if (cart[p]["type"] == product.type){              console.log("we got "+ product.type +"!, let's remove " + cart[p]["name"] + " , add in " + product["name"]);              this.cart.$remove(cart[p])           }       }       console.log("adding " + product.name + " cart.");       var productname = product.name       var cartproduct = {name: product.name, type: product.type}       this.cart.push(cartproduct)     }   } })  var vegetable = product.extend({   template: '#vegetable', }); var fruit = product.extend({   template: '#fruit', }); 

here's plunker approach.

given fruit , vegetable templates similar, might able take idea further , use common template base component.