2016-04-21 15 views
7

è possibile utilizzare il metodo che sovrascrive in Vue.js?metodo genitore chiamata ereditaria Vue.js

var SomeClassA = Vue.extend({ 
    methods: { 
     someFunction: function() { 
      // ClassA some stuff 
     } 
    } 
}); 

var SomeClassB = SomeClassA.extend({ 
    methods: { 
     someFunction: function() { 
      // CALL SomeClassA.someFunction 
     } 
    } 
}); 

Desidero chiamare ClassA someFunction da ClassB someFunction. È possibile?

risposta

13

No, la vue non funziona con un modello di ereditarietà diretta. Non è possibile eseguire il componente A.extend, per quanto ne so. Le relazioni genitore-figlio funzionano principalmente attraverso oggetti di scena ed eventi.

Non ci sono però tre soluzioni:

1. puntelli Passing (padre-figlio)

var SomeComponentA = Vue.extend({ 
    methods: { 
     someFunction: function() { 
      // ClassA some stuff 
     } 
    } 
}); 

var SomeComponentB = Vue.extend({ 
    props: [ 'someFunctionParent' ], 
    methods: { 
     someFunction: function() { 
      // Do your stuff 
      this.someFunctionParent(); 
     } 
    } 
}); 

e nel modello di SomeComponentA:

<some-component-b someFunctionParent="someFunction"></some-component-b> 

2. Mixin

Se questa è la funzionalità comuni che si desidera utilizzare in altri luoghi, utilizzando un mixin potrebbe essere più idiomatica:

var mixin = { 
    methods: { 
     someFunction: function() { 
      // ... 
     } 
    } 
}; 

var SomeComponentA = Vue.extend({ 
    mixins: [ mixin ], 
    methods: { 
    } 
}); 

var SomeComponentB = Vue.extend({ 
    methods: { 
     someFunctionExtended: function() { 
      // Do your stuff 
      this.someFunction(); 
     } 
    } 
}); 

3. Calling puntelli controllanti (padre-figlio, brutto)

// In someComponentB's 'someFunction': 
this.$parent.$options.methods.someFunction(...); 
+0

1. È una soluzione piuttosto buona quando si tratta di ultima istanza, ma non è molto estendibile. 2. Ho pensato di usare Mixins qui, ma non è nemmeno estensibile la necessità di cambiare i nomi delle funzioni. 3. Può anche funzionare ?! http://jsfiddle.net/9s146cdr/1/. Questo sarebbe meglio, se solo fosse vero :) – MyFantasy512

+0

Io davvero non consiglio di usare # 3 e l'ho incluso solo come riferimento. Gli altri due sono molto più idiomatici per Vue (generalmente l'ereditarietà non ha molto senso, dal momento che componentA non è una classe astratta ma un componente genitore nel DOM con responsabilità diverse dal componente B). Probabilmente aiuta se si pensa meno all'estensibilità e più alle responsabilità dei componenti. – nils

+0

Non si può usare # 3 perché non funziona :) Non posso essere d'accordo con _since componentA non è una classe astratta ma un componente genitore nel DOM con responsabilità diverse rispetto al componente B_ perché le classi con nome errato dovrebbero essere 'SomeAbstractComponentA' . Vengo da Vue da Ember, e secondo me l'ereditarietà dei componenti non è nulla di sbagliato. – MyFantasy512

Problemi correlati