如何在Vue中转发$ refs

时间:2019-10-12 16:01:56

标签: javascript vue.js

我有一个应该将所有内容传递给孩子的组件。我已经成功传递了$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传递给特殊的方式。

2 个答案:

答案 0 :(得分:1)

我认为不可能直接模仿 React's ref Vue 中的ref属性只是一个字符串,用于在渲染功能期间注册对父项$refs对象的子项引用。

以下是文档docdoc

的链接

因此,基本上,这是一种反向逻辑。.而不是将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`  
},

答案 1 :(得分:0)

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

中替换父母的 ref
el-form-responsive