Pasar datos a componentes en vue.js

Nuestro grupo de especialistas despúes de algunos días de investigación y de juntar de datos, encontramos la solución, nuestro deseo es que te sea útil en tu proyecto.

Solución:

————- Lo siguiente es aplicable solo a 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.

Este valor de prop estará disponible para su componente solo si agrega el nombre de prop prop-name para usted props attribute.

---

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

Y desea enviar datos desde para entonces en tendrás que despachar un evento:

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

Este evento viajará hasta el final de la cadena principal. Y de cualquier padre que tengas una rama hacia usted transmite 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á a lo largo de la cadena infantil. Y a cualquier niño que quieras agarrar el evento, en nuestro caso 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.

La mejor forma de enviar datos de un componente principal a un componente secundario es mediante accesorios.

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

• Declarar props (array u objeto) en el niño
• Pásalo al niño a través de

Vea la demostración a continuación:

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

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

  
At Parent:  variableAtParent 
And is reactive (edit it) 
  

Creo que el problema está aquí: