将ref的内容从孩子传递给另一个VueJS子组件

Question

我正在学习VueJS，并且我对ref，$ refs讲座有些困惑。我试图从vue的文档中了解它，但我没有得到我想知道的。

举例来说，如果我有这个组件：

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

，我使用

此得到这个组件中的数据$ refs.details

使用的这些数据用户父组件，因为此用户项是用户组件的子项。

<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或在组件之间调度事件。

如果您真的想通过$refs访问您的user-item。那么你应该从你的permissions组件这样做。

this.$parent.$refs.details 

这将基本上得到父的引用（您User成分），这在其$refsdetails。

这是假设你的组件放在一起这样的：

<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是permissions组件props一员。

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