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