Passaggio dei dati ai componenti in vue.js

Question

Non riesco a capire come passare i dati tra i componenti in vue.js. Ho letto più volte i documenti e ho esaminato molte domande e tutorial relativi a Vue, ma non riesco ancora a ottenerlo.

di avvolgere la mia testa intorno a questo, spero in aiuto il completamento di un piuttosto semplice esempio

1. visualizzare un elenco di utenti in un solo componente (fatto)
2. inviare i dati utente in un nuovo componente quando viene fatto clic su un collegamento (fatto) - vedi aggiornamento in fondo.
3. modificare i dati degli utenti e rinviarlo al componente originale (non hanno ottenuto fino a questo punto)

Ecco un violino, che non riesce a passo due: https://jsfiddle.net/retrogradeMT/d1a8hps0/

ho capito che ho bisogno di usare oggetti di scena per passare i dati al nuovo componente, ma non sono sicuro di come farlo funzionalmente. Come legare i dati al nuovo componente?

HTML:

<div id="page-content"> 
     <router-view></router-view> 
    </div> 

<template id="userBlock" > 
    <ul> 
    <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a> 
    </li> 
    </ul> 
</template> 

    <template id="newtemp" :name ="{{user.name}}"> 
    <form> 
     <label>Name: </label><input v-model="name"> 
     <input type="submit" value="Submit"> 
    </form> 
    </template> 

js per il componente principale:

Vue.component('app-page', { 
    template: '#userBlock', 

    data: function() { 
    return{ 

     users: [] 
     } 
    }, 

ready: function() { 
    this.fetchUsers(); 
}, 

methods: { 
    fetchUsers: function(){ 
     var users = [ 
      { 
      id: 1, 
      name: 'tom' 
      }, 
      { 
      id: 2, 
      name: 'brian' 
      }, 
      { 
      id: 3, 
      name: 'sam' 
      }, 
     ]; 

     this.$set('users', users); 
    } 
    } 
    }) 

JS per seconda componente:

Vue.component('newtemp', { 
    template: '#newtemp', 
    props: 'name', 
    data: function() { 
    return { 
     name: name, 
     } 
    }, 
}) 

UPDATE

Ok, ho capito il secondo passo. Ecco un nuovo violino che mostra i progressi: https://jsfiddle.net/retrogradeMT/9pffnmjp/

Perché sto usando Vue-router, non uso oggetti di scena per inviare i dati a un nuovo componente. Invece, ho bisogno di impostare i parametri sul v-link e quindi utilizzare un hook di transizione per accettarlo.

V-link cambia see named routes in vue-router docs:

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a> 

Poi sul componente, aggiungere dati al opzioni di percorso see transition hooks:

Vue.component('newtemp', { 
    template: '#newtemp', 
    route: { 
    data: function(transition) { 
     transition.next({ 
      // saving the id which is passed in url 
      name: transition.to.params.name 
     }); 
    } 
    }, 
data: function() { 
    return { 
     name:name, 
     } 
    }, 
}) 

Answer 1

------------- seguito è applicabile solo a Vue 1 --------------

dati che passano può essere fatto in diversi modi . Il metodo dipende dal tipo di utilizzo.

---

Se si desidera passare i dati dal proprio html mentre si aggiunge un nuovo componente. Quello è fatto usando i puntelli.

<my-component prop-name="value"></my-component> 

Questo valore prop sarà disponibile per il componente solo se si aggiunge il nome prop prop-name per l'attributo props.

---

Quando i dati vengono passati da un componente a un altro componente a causa di un evento dinamico o statico. Ciò viene fatto utilizzando i dispatcher e le emittenti di eventi. Così, per esempio, se si dispone di una struttura dei componenti del genere:

<my-parent> 
    <my-child-A></my-child-A> 
    <my-child-B></my-child-B> 
</my-parent> 

E si desidera inviare i dati da <my-child-A> a <my-child-B> poi nel <my-child-A> si dovrà inviare un evento:

this.$dispatch('event_name', data); 

questo evento percorrere tutta la catena superiore. E da qualsiasi genitore hai un ramo verso <my-child-B> hai trasmesso l'evento insieme ai dati. Quindi nel genitore:

events:{ 
    'event_name' : function(data){ 
     this.$broadcast('event_name', data); 
    }, 

Ora questa trasmissione percorrerà la catena secondaria. E a seconda di quale bambino si vuole afferrare l'evento, nel nostro caso <my-child-B> aggiungeremo un altro evento:

events: { 
    'event_name' : function(data){ 
     // Your code. 
    }, 
}, 

---

Il terzo modo per passare i dati è attraverso parametri in v-link. Questo metodo viene utilizzato quando le catene di componenti sono completamente distrutte o nei casi in cui l'URI cambia. E posso vedere che li capisci già.

---

Decidere quale tipo di comunicazione dati si desidera e scegliere in modo appropriato.

Answer 2

Credo che il problema è qui:

<template id="newtemp" :name ="{{user.name}}"> 

Quando premi il puntello con : sei indicativo a Vue che è una variabile, non una stringa. Quindi non è necessario il {{}} intorno a user.name. Prova:

<template id="newtemp" :name ="user.name"> 

EDIT -----

È possibile che questo è vero, ma il problema più grande è che quando si cambia l'URL e andare a un nuovo percorso, il componente originale scompare. Affinché il secondo componente modifichi i dati principali, il secondo componente deve essere un componente figlio del primo o solo una parte dello stesso componente.

Answer 3

Ho trovato un modo per passare i dati principali allo scope dei componenti in Vue, penso che sia un po 'un trucco, ma forse questo ti aiuterà.

1) Dati di riferimento in grado Vue come un oggetto esterno (dati: dataObj)

2) Poi nella funzione ritorno dati nel componente bambino appena ritornano parentSCOPE = dataObj e voilà. Ora puoi fare cose come {{parentScope.prop}} e funzionerà come un incantesimo.

Buona fortuna!

Answer 4

Il modo migliore per inviare dati da un componente principale a un figlio sta utilizzando props.

Passando i dati da genitore a figlio attraverso props

• Dichiarare props (array o object) nel bambino
• passarlo al bambino tramite <child :name="variableOnParent">

Vedere demo di seguito:

Vue.component('child-comp', { 
 
    props: ['message'], // declare the props 
 
    template: '<p>At child-comp, using props in the template: {{ message }}</p>', 
 
    mounted: function() { 
 
    console.log('The props are also available in JS:', this.message); 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    variableAtParent: 'DATA FROM PARENT!' 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <p>At Parent: {{ variableAtParent }}</p> 
 
    <child-comp :message="variableAtParent"></child-comp> 
 
</div>