如何在 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 () {&nbsp; 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 {&nbsp; data: () => ({&nbsp; &nbsp; whatever: null&nbsp; }),&nbsp; mounted () {&nbsp; &nbsp; this.whatever = this.$refs.elform.whatever&nbsp; },&nbsp; methods: {&nbsp; &nbsp; submit () {&nbsp; &nbsp; &nbsp; this.$refs.elform.submit()&nbsp; &nbsp; }&nbsp; }}那么在一些父级内部el-form-responsive可以这样使用：<el-form-responsive ref="form">...mounted () {&nbsp; const formWhatever = this.$refs.form.whatever // actually `whatever` from `el-form`&nbsp; this.$refs.form.submit() // eventually calls submit on `el-form`&nbsp;&nbsp;},

Answer 2

试试这个用孩子的，在替换父母的参考 el-form-responsive<template>&nbsp; <el-form v-on="$listeners" v-bind="$attrs" :label-position="labelPosition" ref='ref'>&nbsp; &nbsp; <slot />&nbsp; </el-form></template>mounted () {&nbsp; Object.entries(this.$parent.$refs).forEach(([key, value]) => {&nbsp; &nbsp; if (value === this) {&nbsp; &nbsp; &nbsp; this.$parent.$refs[key] = this.$refs.ref&nbsp; &nbsp; }&nbsp; })...