时间戳

首页 > 解决方案 > 如何在 Vue 中转发 $refs

javascript - 如何在 Vue 中转发 $refs

问题描述

我有一个组件应该将所有内容传递给孩子。我已经成功通过$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我宁愿透明地执行此操作，因为您传递的道具与传递给 a的道具完全相同，el-form而无需知道refs必须以特殊方式传递。

标签： javascriptvue.js

解决方案

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

以下是文档doc和doc的链接

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

不过有一些解决方法。

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

你的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`  
},

推荐阅读