VueJS étend les méthodes et les données

Question

Je voudrais étendre les méthodes. Exemple:

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

J'utilise plusieurs extensions.

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

Code d'erreur: this.fetchData est indéfini. this.modal n'est pas une fonction

Answer 1

Vue.extend renvoie une nouvelle définition de composant Vue qui peut être ultérieurement instanciée à l'aide du mot clé new, elle ne modifie pas l'objet Vue global. Donc, si vous voulez créer un essai de hiérarchie composant:

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() 

Vérifiez que fiddle pour un exemple vivant.