将ref的内容从子项传递到另一个VueJS子组件

Question

我正在学习VueJS,我对ref,$ refs讲座感到有些困惑.我试图从vue的文档中理解它,但我没有得到我想知道的东西.

例如,我有这个组件:

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

我使用这个组件获取数据

这一点.$ refs.details

在User父组件中使用该数据,因为此用户项是User组件的子项.

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

同时我还有一个名为的子组件,比如用户组件,也就是孩子的权限.

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

在这个权限组件中,我需要相同的这个.$ refs.details,但是我测试的,如实验,不起作用.

这只是一个简单的例子.

有人可以告诉我我该怎么办？

Answer 1

您无需使用$refs在组件之间传递数据.使用data,props或组件之间的调度事件,而不是.

如果你真的想要访问你的user-item通道$refs.然后你应该从你的permissions组件这样做.

this.$parent.$refs.details

这将基本上得到一个参考家长(您User拥有分量)details在其$refs.

这假设您的组件放在一起如下:

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

编辑: $refs当组件被安装时,它似乎是空的,因此,details它将是undefined.将整个$refs对象传递给permissions组件props似乎与OP一起使用.

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

组件中的parentRefs成员在哪里.permissionsprops

OP能够user-item从permissions使用中访问this.parentRefs.details.