En passant ref du contenu à partir d'un enfant à l'autre VueJS composant enfant
Je suis en train d'apprendre VueJS et je me suis un peu confus sur le ref, $refs conférence. J'ai essayé de comprendre de vue de la documentation, mais je n'ai pas ce que je veux savoir.
Si par exemple j'ai ce composant:
<user-item ref="details"></user-item>
et je reçois les données à partir de ce composant à l'aide de
cela.$réf.détails
à l'utilisation de ces données à l'Utilisateur du composant parent, parce que ce point est un enfant de l'Utilisateur du composant.
<div id="User">
<user-item ref="details"></user-item>
</div>
Dans le même temps, j'ai un autre composant appelé, disons que les Autorisations de l'enfant de trop, pour le composant Utilisateur:
<div id="User">
<user-item ref="details"></user-item>
<permissions></permissions>
</div>
Dans ce Autorisations composante j'ai besoin de la même chose.$réf.les détails, mais d'après ce que j'ai test, comme une expérience, ne fonctionne pas.
C'est juste un exemple simple.
Quelqu'un peut-il me dire comment puis-je le faire?
Vous devez vous connecter pour publier un commentaire.
Vous n'avez pas besoin d'utiliser
$refs
pour transmettre les données entre les composants. Utilisationdata
,props
ou de l'expédition des événements entre des composants à la place.si vous voulez vraiment pour accéder à votre
user-item
via$refs
. Ensuite, vous devez faire comme ceci à partir de votrepermissions
composant.Essentiellement l'obtention d'une référence à la société mère (votre
User
composant) qui adetails
dans son$refs
.Cela suppose que vos composants sont mis ensemble comme ceci:
Edit:
$refs
semble que c'est vide lorsque le composant est monté, par conséquent,details
seraundefined
. En passant l'ensemble de la$refs
objet de lapermissions
du composantprops
semble fonctionner avec l'OP.Où
parentRefs
est un membre enpermissions
du composantprops
.OP a été en mesure d'accéder à
user-item
depermissions
à l'aide dethis.parentRefs.details
.this.$nextTick(() => { this.$parent.$ref.details.open({ title: this.fullName, }); });
c'est dans l'enfant et c'est au parent:this.$nextTick(() => { this.$refs.details.open({ title: this.fullName, }); });
this.$parent
etthis.$parent.$refs
. Je pense que$refs
prend un certain temps après que le composant est monté à être disponibles. J'ai vu cela dans de nombreux cas.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: ...
et pour cette.$parent j'obtiens dans la console:VueComponent {_uid: 11, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent…}
details
dans son$refs
$el
dans votre VueComponent et$refs
$el: div.layout
, c'est de mes parents