Tengo datos en App.vue que se ven así:
data() { return { information: { item1: 'item 1 string', item2: 'item 2 string', item3: 'item 3 string' } } },Quiero pasar esta información a un componente como este:
<ComponentName prop="something-else" info=this.data.information.item1 />
Pero no obtengo los datos, solo obtengo la cadena ...?
Pasar datos a componentes en vue.js
Entonces voy:
<ComponentName prop="something-else" :info=this.data.information.item1>
Pero toda mi página se queda en blanco
Vue JS 3: ¿Cómo pasar datos de un componente a otro?
Estoy un poco confundido por este, pero luego encontré
Pasar los datos al componente en vuejs
Así que agregué básicamente como, un método estático
<ComponentName prop="something-else" information=information.item1> methods: { information() { this.information.item1 = information.item1 } },Pero recibo un error sobre clave duplicada y un error sin definición.
¿Cómo pasa datos de vue a un componente?
Debe acceder directamente a los datos devueltos por la opción de data y vincularlos a la propiedad:
<ComponentName :info="information.item1">Al escribir con HTML, nunca escribe data methods this computed . Simplemente escribe los datos, el método, la propiedad calculada directamente, etc.
<ComponentName :info=information.item1 /> Obtiene un error de clave duplicada porque la information de su método ya existe como una clave de propiedad dentro de sus data
Con : atas algo. Sin : solo pasas una cadena
Quiero decir, con solo mirar los ejemplos, debería darse cuenta de que nunca usan data o this dentro de la plantilla.
Creo que lo que tienes que hacer es registrar los accesorios.
Por ejemplo.
El componente Vue
<componentName :lists="lists"></componentName>
Luego, en su componente, registre los accesorios.
props: ['lists'], data() { return { information: { item1: 'item 1 string', item2: 'item 2 string', item3: 'item 3 string' } } }Déjeme saber si esto le ayuda.