vuejs aggiorna i dati principali dal componente figlio

Sto iniziando a giocare con vuejs (2.0). Ho creato una pagina semplice con un componente al suo interno. La pagina ha un’istanza Vue con dati. In quella pagina mi sono registrato e ho aggiunto il componente a html. Il componente ha un input[type=text] . Voglio che quel valore rifletta sul genitore (istanza di Vue principale).

Come aggiorno correttamente i dati principali del componente? Passare un puntello rilegato dal genitore non è buono e lancia alcuni avvertimenti alla console. Hanno qualcosa nel loro doc ma non funziona.

L’associazione bidirezionale è stata deprecata in Vue 2.0 a favore dell’utilizzo di un’architettura più basata sugli eventi. In generale, un bambino non dovrebbe mutare i suoi oggetti di scena. Piuttosto, dovrebbe $emit eventi e lasciare che il genitore risponda a quegli eventi.

Nel tuo caso specifico, potresti utilizzare un componente personalizzato con v-model . Questa è una syntax speciale che consente qualcosa vicino al binding a due vie, ma in realtà è una scorciatoia per l’architettura basata sugli eventi sopra descritta. Puoi leggere a riguardo qui -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events .

Ecco un semplice esempio:

 Vue.component('child', { template: '#child', //The child has a prop named 'value'. v-model will automatically bind to this prop props: ['value'], methods: { updateValue: function (value) { this.$emit('input', value); } } }); new Vue({ el: '#app', data: { parentValue: 'hello' } }); 
  

Parent value: {{parentValue}}

Dalla documentazione :

In Vue.js, la relazione del componente genitore-figlio può essere riassunta come oggetti di scena in basso, eventi in alto. Il genitore trasmette i dati al figlio tramite gli oggetti di scena, e il bambino invia messaggi al genitore tramite eventi. Vediamo come funzionano dopo.

inserisci la descrizione dell'immagine qui

Come passare oggetti di scena

Di seguito è riportato il codice per passare oggetti di scena a un elemento figlio:

 

Come emettere un evento

HTML:

 

{{ total }}

JS:

 Vue.component('button-counter', { template: '', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) 

È anche ansible passare oggetti di scena come object o matrice. In questo caso i dati saranno bindati in due modi:

(Questo è annotato alla fine dell’argomento: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow )

 Vue.component('child', { template: '#child', props: {post: Object}, methods: { updateValue: function () { this.$emit('changed'); } } }); new Vue({ el: '#app', data: { post: {msg: 'hello'}, changed: false }, methods: { saveChanges() { this.changed = true; } } }); 
  

Parent value: {{post.msg}}

Parent msg: Data been changed - received signal from child!