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

发布于07月19日

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

例如，如果我有这个组件:

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

我使用

这个$裁判.细节

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

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

同时，我还有另一个组件，叫做用户组件的子组件权限:

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

In this Permissions component I need the same 这个$裁判.细节, but from what I test, like an experiment, doesn't work.

举个简单的例子.

有人能告诉我怎么做吗？

推荐答案

在组件之间传递数据不需要使用$refs.使用data、props或在组件之间分派事件.

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

this.$parent.$refs.details

它基本上会得到一个对父组件(你的User组件)的引用，它的$refs中有details.

这假设您的组件是这样组合的:

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

Edit:

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

其中parentRefs是permissions组件props中的成员.

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

实用课程推荐