VueJS расширяет методы и данные

Question

Я хотел бы расширить методы. Пример:

Vue.extend({
    data: function () {
        return {
            fetcData: 'Test',
        }
    },
    methods: function(){
        return {
            modal: function(){ alert('Modal') },
        }
    }
});
Vue.extend({
    ....
});

Я использую несколько расширений.

// VueJS Instance
new Vue({
    el: 'html',
    data: {
        effect: true
    },
    methods: {
        xhrGet: function () {
            alert(this.fetcData); // Undefined
            this.modal(); // Undefined
        },
        xhrPost: function (event) {
            alert('xhrPost')
        }
    }
});

Код ошибки: this.fetchData не определено. this.modal не является функцией

Answer 1

Vue.extend возвращает новое определение компонента Vue, которое может быть позже создано с использованием new ключевое слово, оно не изменяет глобальный объект Vue. Поэтому, если вы хотите создать иерархию компонентов, попробуйте:

var BaseComponent = Vue.extend({
  methods: {
    foo: function() { console.log('foo') }
  }
})

var MyComponent = BaseComponent.extend({
  methods: {
    bar: function() { 
      this.foo()
      console.log('bar')
    }
  }
})

let myComponentInstance = new MyComponent()

Проверьте эту скрипку для живого примера.