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

Question

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

如果我有这个组件：

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

我使用

从这个组件获取数据

this.$refs.details

在用户父组件中使用该数据，因为此用户项是用户组件的子项。

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

同时，我还有另一个名为的组件，假设权限也是子组件，用于用户组件：

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

在这个 Permissions 组件中，我需要相同的 this.$refs.details，但从我测试的结果来看，就像一个实验一样，它不起作用。

这只是一个简单的例子。

谁能告诉我该怎么做？

Answer 1

您不需要使用$refs 在组件之间传递数据。请改用data、props 或在组件之间调度事件。

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

this.$parent.$refs.details

它基本上会获得对在其$refs 中有details 的父级（您的User 组件）的引用。

这假设您的组件是这样组合在一起的：

<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。