Pasar datos a componentes en vue.js

Question

Me cuesta entender cómo pasar datos entre componentes en vue.js. He leído los documentos varias veces y he visto muchas preguntas y tutoriales relacionados con vue, pero todavía no lo entiendo.

Para entender esto, espero ayuda para completar un ejemplo bastante simple

1. mostrar una lista de usuarios en un componente (hecho)
2. envíe los datos del usuario a un nuevo componente cuando se haga clic en un enlace (listo); consulte la actualización en la parte inferior.
3. edite los datos del usuario y envíelos al componente original (no he llegado hasta aquí)

Aquí hay un violín, que falla en el paso dos: https://jsfiddle.net/retrogradeMT/d1a8hps0/

Entiendo que necesito usar accesorios para pasar datos al nuevo componente, pero no estoy seguro de cómo hacerlo funcionalmente. ¿Cómo enlazo los datos al nuevo 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 para componente principal:

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 para el segundo componente:

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

ACTUALIZAR

Ok, tengo el segundo paso resuelto. Aquí hay un nuevo violín que muestra el progreso: https://jsfiddle.net/retrogradeMT/9pffnmjp/

Como estoy usando el enrutador Vue, no uso accesorios para enviar los datos a un nuevo componente. En cambio, necesito establecer parámetros en el enlace v y luego usar un enlace de transición para aceptarlo.

Los cambios de V-link ven las rutas nombradas en los documentos vue-router :

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

Luego, en el componente, agregue datos a las opciones de ruta, vea ganchos de transición :

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

------------- Lo siguiente es aplicable solo al Vue 1 --------------

El paso de datos se puede hacer de varias maneras. El método depende del tipo de uso.

Si desea pasar datos de su html mientras agrega un nuevo componente. Eso se hace usando accesorios.

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

Este valor de accesorio estará disponible para su componente solo si agrega el nombre de prop-name a su atributo de props .

Cuando los datos se pasan de un componente a otro debido a algún evento dinámico o estático. Eso se hace mediante el uso de despachadores de eventos y emisoras. Entonces, por ejemplo, si tiene una estructura de componentes como esta:

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

Y desea enviar datos desde <my-child-A> a <my-child-B> luego en <my-child-A> deberá enviar un evento:

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

Este evento recorrerá toda la cadena principal. Y de cualquier padre que tenga una rama hacia <my-child-B> , difunde el evento junto con los datos. Entonces en el padre:

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

Ahora esta transmisión viajará por la cadena infantil. Y en cualquier niño que desee tomar el evento, en nuestro caso <my-child-B> agregaremos otro evento:

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

La tercera forma de pasar datos es a través de parámetros en v-links. Este método se utiliza cuando las cadenas de componentes se destruyen por completo o en los casos en que cambia el URI. Y puedo ver que ya los entiendes.

Decida qué tipo de comunicación de datos desea y elija adecuadamente.

Answer 2

Creo que el problema está aquí:

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

Cuando prefijas el accesorio con : estás indicando a Vue que es una variable, no una cadena. Por lo tanto, no necesita el {{}} alrededor de user.name . Tratar:

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

EDITAR-----

Lo anterior es cierto, pero el problema más grande aquí es que cuando cambia la URL y se dirige a una nueva ruta, el componente original desaparece. Para que el segundo componente edite los datos primarios, el segundo componente debería ser un componente secundario del primero, o simplemente una parte del mismo componente.

Answer 3

He encontrado una manera de pasar datos primarios al alcance del componente en Vue, creo que es un poco pirateo, pero tal vez esto lo ayude.

1) Datos de referencia en Vue Instance como un objeto externo (data : dataObj)

2) Luego, en la función de retorno de datos en el componente hijo, simplemente devuelva parentScope = dataObj y voila. Ahora no puede hacer cosas como {{ parentScope.prop }} y funcionará de {{ parentScope.prop }} .

¡Buena suerte!

Answer 4

La mejor manera de enviar datos de un componente principal a un hijo es usar props .

Transmitir datos de padres a hijos a través de props

• Declarar props (matriz u object ) en el niño
• Pásalo al niño a través de <child :name="variableOnParent">

Ver demostración a continuación:

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/[email protected]/dist/vue.min.js"></script>

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

Answer 5

Se puede usar una variable global JS (objeto) para pasar datos entre componentes. Ejemplo: pasar datos de Ammlogin.vue a Options.vue. En Ammlogin.vue, rspData está configurado para la respuesta del servidor. En Options.vue, la respuesta del servidor está disponible a través de rspData.

index.html:

<script>
    var rspData; // global - transfer data between components
</script>

Ammlogin.vue:

....    
export default {
data: function() {return vueData}, 
methods: {
    login: function(event){
        event.preventDefault(); // otherwise the page is submitted...
        vueData.errortxt = "";
        axios.post(''http://vueamm...../actions.php'', { action: this.$data.action, user: this.$data.user, password: this.$data.password})
            .then(function (response) {
                vueData.user = '''';
                vueData.password = '''';
                // activate v-link via JS click...
                // JSON.parse is not needed because it is already an object
                if (response.data.result === "ok") {
                    rspData = response.data; // set global rspData
                    document.getElementById("loginid").click();
                } else {
                    vueData.errortxt = "Felaktig avändare eller lösenord!"
                }
            })
            .catch(function (error) {
                // Wu oh! Something went wrong
                vueData.errortxt = error.message;
            });
    },
....

Options.vue:

<template>
<main-layout>
  <p>Alternativ</p>
  <p>Resultat: {{rspData.result}}</p>
  <p>Meddelande: {{rspData.data}}</p>
  <v-link href=''/''>Logga ut</v-link>
</main-layout>
</template>
<script>
 import MainLayout from ''../layouts/Main.vue''
 import VLink from ''../components/VLink.vue''
 var optData = { rspData: rspData}; // rspData is global
 export default {
   data: function() {return optData},
   components: {
     MainLayout,
     VLink
   }
 }
</script>