Question

我有一个应该将所有内容传递给孩子的组件。我已经成功传递了$attrs和$listeners：

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

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

<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's ref。 Vue 中的ref属性只是一个字符串，用于在渲染功能期间注册对父项$refs对象的子项引用。

以下是文档doc和doc

的链接

因此，基本上，这是一种反向逻辑。.而不是将ref传递给Vue中的子代，我们将其从子代传递到父代。因此，此时实际上无法创建孙子引用，而这正是您所需要的。

尽管有一些解决方法。

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之后实际上是对Granchild <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

尝试用孩子的 , 在 select id, col1, col2, col3, (ISNULL(col1, 0) + ISNULL(col2, 0) + ISNULL(col3, 0)) total from @tbl

中替换父母的 ref

el-form-responsive

如何在Vue中转发$ refs

2 个答案: