Как добавить функцию в другую функцию с помощью Vue.js [duplicate]

Я нашел этот метод более простым / удовлетворительным, так как я предпочитаю состав над наследованием:

src / shared.js

export default {
  foo: function(){ alert("foo!") }
}

src / yourcomponent.vue

<template>..</template>

<script>
  import 'shared' from './shared'

  export default {
    mounted: function(){ 
      this.foo = shared.foo // now you can call this.foo() (in your functions/template)
    }
  }
</script>

Это также облегчит запись тестов vue-agnostic.

ПРИМЕЧАНИЕ. Если вам нужно запустить foo в vue-scope, замените this.foo = shared.foo на this.foo = shared.foo.bind(this)

Вы можете поместить метод в свой корневой экземпляр Vue, а затем отправить событие из дочернего экземпляра, когда выбран veggie или когда выбран фрукт. События ищут обработчик на их родительском компоненте, и если они не находят обработчик событий, они продолжают подниматься по цепочке до тех пор, пока они не сделают это. Итак, в вашем корневом экземпляре:

events: {
    'choose-fruit':function(fruit){

        //handle the choosing of fruit

    }
}

Затем в дочернем экземпляре:

selectFruit: function(product){

    this.$dispatch('choose-fruit', product);

}

Вариант 1

. Один из способов совместного использования вашего метода между компонентами - использовать mixin. Вот cartMixin, который содержит метод selectProduct:

var cartMixin = {
  methods: {
    selectProduct: function (product) {
      var cart = this.cart
      for(p in cart){
          if (cart[p]["type"] == product.type){
             console.log("We already got a "+ product.type +"!, Let's remove " + cart[p]["name"] + " and add in " + product["name"]);
             this.cart.$remove(cart[p])
          }
      }
      console.log("Adding " + product.name + " to cart.");
      var productName = product.name
      var cartProduct = {name: product.name, type: product.type}
      this.cart.push(cartProduct)
    }
  }
};

Вы можете ссылаться на это в каждом компоненте следующим образом:

var Vegetable = Vue.extend({
    template: '#vegetable',
    mixins: [cartMixin],
    data: function(){
        return sourceOfTruth
    }
})

... а затем использовать его в ваших шаблонах:

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

Вот вилка вашего Plunker .

Вариант 2

Подумав об этом еще один вариант, который вы можете рассмотреть, - создать базовый компонент Product и расширить его для создания ваших компонентов Fruit и Vegetable. Затем вы добавили свою общую функциональность в базовый компонент.

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 already got a "+ product.type +"!, Let's remove " + cart[p]["name"] + " and add in " + product["name"]);
             this.cart.$remove(cart[p])
          }
      }
      console.log("Adding " + product.name + " to 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',
});

Вот такой Plunker с этим подходом .

Учитывая, что ваши шаблоны Fruit and Vegetable настолько похожи, вы могли бы принять эту идею еще больше и использовать общий шаблон из базового компонента.