如何在 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实际上是对 child 的引用<el-form>。我宁愿透明地执行此操作，因为el-form-responsive您将与 a完全相同的 props 传递给 ael-form而无需知道refs必须以特殊方式传递。

Answer 1

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

这是文档doc和doc的链接

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

不过有一些解决方法。

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

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

<el-form ref="elform">

使用您的el-form-responsive. 模板：

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

脚本：

...

mounted () {

  this.$refs.form = this.$refs.form.$refs.elform

}

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

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

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

el-form-responsive. 模板：

<el-form ref="elform">

脚本：

export default {

  data: () => ({

    whatever: null

  }),

  mounted () {

    this.whatever = this.$refs.elform.whatever

  },

  methods: {

    submit () {

      this.$refs.elform.submit()

    }

  }

}

那么在一些父级内部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`  

},

Answer 2

试试这个用孩子的，在替换父母的参考 el-form-responsive

<template>

  <el-form v-on="$listeners" v-bind="$attrs" :label-position="labelPosition" ref='ref'>

    <slot />

  </el-form>

</template>

mounted () {

  Object.entries(this.$parent.$refs).forEach(([key, value]) => {

    if (value === this) {

      this.$parent.$refs[key] = this.$refs.ref

    }

  })

...