如何在Vue中转发$ refs

Question

我有一个组件应将所有内容传递给孩子。我成功通过$attrs并$listeners已经：

<template>
  <el-form v-on="$listeners" v-bind="$attrs" :label-position="labelPosition">
    <slot />
  </el-form>
</template>

但是我不确定如何$refs像在React中一样进行转发，以便在使用这样的组件时：

<el-form-responsive
  class="form"
  :model="formValues"
  status-icon
  :rules="rules"
  ref="form"
  label-width="auto"
  @submit.native.prevent="submitForm"
>

然后this.$refs.form实际上是对孩子的参考<el-form>。

我宁愿透明地执行此操作，因为在您将完全相同的道具传递给对象时el-form-responsive，el-form无需知道refs必须以特殊方式传递。

Answer 1

我认为直接模仿React 是不可能的ref。Vueref中的属性只是一个字符串，用于在渲染函数期间注册对父对象的子组件引用。$refs

以下是文档doc和doc的链接

所以基本上这是一种反向逻辑。我们不是将引用传递给 Vue 中的子级，而是从子级获取到父级。因此，此时实际上不可能创建您所需要的孙子引用。

不过有一些解决方法。

1. 快速脏且不透明，但从技术上讲它可以工作： 在使用您的父组件中el-form-responsive，挂起mounted我们可以用孙子引用替换原始子引用。

你的el-form-responsive组件。模板：

<el-form ref="elform">

使用您的父母el-form-responsive。模板：

<el-form ref="elform">

脚本：

<el-form-responsive ref="form">

在这之后this.$refs.form实际上是对孙子的引用<el-form>

2. 这个方法会更复杂，但可能比第一种方法更好：

为了使el-form-responsive组件真正透明，您可以将子组件中的一些方法和属性公开el-form给任何潜在的父组件。像这样的东西：

el-form-responsive。模板：

...
mounted () {
  this.$refs.form = this.$refs.form.$refs.elform
}

脚本：

<el-form ref="elform">

那么在某些父级内部el-form-responsive可以这样使用：

<el-form-responsive ref="form">

...
mounted () {
  const formWhatever = this.$refs.form.whatever // actually `whatever` from `el-form`
  this.$refs.form.submit() // eventually calls submit on `el-form`  
},