Estoy aprendiendo VueJS y me puse un poco confundido sobre el ref, $refs conferencia. Traté de entender de vue de la documentación, pero no entendía lo que quiero saber.

Si por ejemplo tengo este componente:

<user-item ref="details"></user-item>

y me da los datos de este componente mediante

este.$refs.detalles

para utilizar los datos en el Usuario del componente de los padres, debido a que este usuario-objeto es un niño para el componente de Usuario.

<div id="User">
  <user-item ref="details"></user-item>
</div>

En el mismo tiempo que tengo otro componente llamado, digamos Permisos que el niño también, para el componente de Usuario:

<div id="User">
   <user-item ref="details"></user-item>
   <permissions></permissions> 
</div>

En esto de los Permisos de componente de la misma esta.$refs.los detalles, pero de lo que he de prueba, como un experimento, no funciona.

Este es sólo un ejemplo sencillo.

Por favor alguien puede decirme cómo puedo hacerlo?

InformationsquelleAutor | 2017-07-19

1 Comentario

  1. 12

    Usted no necesita utilizar $refs para pasar los datos entre los componentes. Uso data, props o eventos de distribución entre los componentes en su lugar.

    si usted realmente desea tener acceso a su user-item a través de $refs. Entonces usted debe hacer en su permissions componente.

    this.$parent.$refs.details
    

    Es básicamente una referencia a el /los padre (su User componente) que ha details en su $refs.

    Esto supone que sus componentes se ponen juntos como esto:

    <user>
      <user-item ref="details"></user-item>
      <permissions></permissions>
    </user>
    

    Edición:
    $refs parece que es vacío cuando el componente está montada, por lo tanto, details será undefined. Pasar toda la $refs objeto a la permissions del componente props parece funcionar con la OP.

    <user>
      <user-item ref="details"></user-item>
      <permissions :parentRefs="$refs"></permissions>
    </user>
    

    Donde parentRefs es un miembro en permissions del componente props.

    OP fue capaz de acceder a user-item de permissions utilizando this.parentRefs.details.

    • Kira traté de usar esto.$padre.$refs.detalles y me dieron: «No se puede leer la propiedad «detalles » undefined»
    • hmm puede publicar un fragmento de código? debería funcionar bien.
    • this.$nextTick(() => { this.$parent.$ref.details.open({ title: this.fullName, }); }); esto es, en el hijo y en el padre: this.$nextTick(() => { this.$refs.details.open({ title: this.fullName, }); });
    • tratar de registro de la consola de this.$parent y this.$parent.$refs. Creo que $refs toma algún tiempo después de que el componente está montado a estar disponible. Esto lo vi en muchos casos.
    • para esto.$padre.$ref puedo obtener: Object {backdrop: div.fullscreen.layout-backdrop.transition-generic.no-pointer-events.q-touch.q-touch-y, header: header.layout-header.transition-generic.fixed-top, main: div.layout-page-container.transition-generic, footer: ... y para esto.$padre me pongo en la consola: VueComponent {_uid: 11, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent…}
    • Mira mis editado respuesta. Su diseño tiene que ser así. Usted necesita para asegurarse de que $los padres de los puntos a la vue componente que ha details en su $refs
    • Permítanos continuar esta discusión en el chat.
    • que la lista era demasiado largo para ponerlo aquí y tiene un montón de VueComponents. De hecho, a mi los componentes son exactamente la forma de poner por encima de ellos. En el interior de Usuario que tengo los otros 2 y el usuario de los detalles tiene que ref
    • basta con mirar en el $el en su VueComponent y $refs
    • La seguridad suave desde el trabajo no me deja abrir el chat 🙁
    • Veo en que VueComponent: $el: div.layout, esto es de mi padre
    • No se preocupe. Ok, lo de alrededor de $refs?
    • $refs es un objeto: prntscr.com/fxm527
    • Estoy en el chat. Por favor, vamos a ir allí

Dejar respuesta

Please enter your comment!
Please enter your name here