metodi genitore di accesso dal modello componente vuejs

ho questo codice:metodi genitore di accesso dal modello componente vuejs

 new Vue({ 
     el: '#app', 
     components: { 
      'app-component': AppComponent 
     }, 
     data: { 
      message: 'Hello Vue.js!' 
     }, 
     methods: { 
      doSomething: function(){ 
       console.log('arrived!') 
      } 
     } 
    })

Come posso chiamare il metodo "doSomething" dal AppComponent html modello? in questo modo:

<app-component> 
    <a href="#" v-on:click="doSomething()">text</a> 
</app-component>

ottengo questo errore:

Uncaught TypeError: scope.doSomething is not a function

fonte

2016-05-14 saeedhbi

prova 'v-on: click = "doSomething"' – maioman

@maioman ho ottenuto questo: [Vue avvertire]: v-on: click = "doSomething" si aspetta un valore di funzione, ma ho undefined (che si trova in un componente : ) – saeedhbi

È possibile utilizzare $ dispaccio dal bambino per attivare un evento. Esempio:

// App component 
<app-component> 
    <a href="#" v-on:click.prevent="$dispatch('do-something')">text</a> 
</app-component> 


// Parent 
new Vue({ 
    el: '#app', 
    components: { 
     'app-component': AppComponent 
    }, 
    data: { 
     message: 'Hello Vue.js!' 
    }, 
    events: { 
     'do-something': function(){ 
      console.log('arrived!') 
     } 
    } 
});

Per ulteriori informazioni sulla comunicazione genitori-figli, controllare la documentazione: http://vuejs.org/guide/components.html#Parent-Child-Communication

fonte

2016-05-14 11:28:16 Wiljan

Esiste una soluzione senza eventi? come la prototipazione dell'istanza di Vue o ecc. – saeedhbi

@saeedhbi Stavo cercando di ottenere qualcosa di simile a te, cioè mettere tutti i metodi condivisi/comuni in un componente di base e quindi estendere il componente di base per creare nuovi componenti che richiedono i metodi condivisi/comuni. Usare mixin o plugin personalizzati sembra essere una soluzione più elegante. Attualmente sto usando l'approccio mixin, in cui ho tutti i metodi condivisi in un mixin e ogni volta che qualsiasi componente richiede quei metodi condivisi, io uso il mixin in quel componente. I mixin in Vue sono proprio come 'trait in php'. Spero che sia d'aiuto. – Donkarnash

Off causa, mixins è la risposta! Grazie! – pilat

Oltre alla risposta Wiljan, estendo tutti i componenti con nuova istanza Vue che ha metodi e dati. Ora ho accesso ai metodi ed ecc

fonte

2016-05-14 14:36:17 saeedhbi

Puoi approfondire? Non sono sicuro, ma sembra qualcosa che non si dovrebbe assolutamente fare ... –

@LinusBorg Non voglio condividere i metodi con oggetti di scena o eventi e questi metodi e dati sono globali come utente o azienda e devono essere condivisi tutti oltre i componenti di applicazione. E non voglio usarli con $ parent o $ dispatch o ecc. Su ciascun componente uso la proprietà "extends" per ottenerla e usarla su questo. Ora accedo al nome del metodo nel modello del componente. So che i componenti sono isole ed è meglio essere isolati, ma penso che questo non sconfigga nulla. – saeedhbi

provo v-on:click="$parent.doSomething()"

fonte

2016-05-15 06:42:24

È possibile utilizzare questo, sulla base di this answer.

this.$parent.$options.methods.someParentMethod(data)

fonte

2016-10-01 08:46:38 Saman

metodi genitore di accesso dal modello componente vuejs

risposta

Problemi correlati