Vue.js 如何在 Vue 中转发 $refs

发布于10月13日

我有一个组件，可以把一切都传给子元素.我已经成功地通过了$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>.

我宁愿透明地这样做，就像你把完全相同的props 传给el-form-responsive，就像你把props 传给el-form一样，而不需要知道refs必须以一种特殊的方式传递.

推荐答案

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

Here are the links to documentations 100 & 101

所以基本上这是一种逆向逻辑..在Vue中，我们不是将ref传递给子对象，而是将其从子对象传递给父对象.因此，现在不可能创建孙辈引用，这正是您所需要的.

不过也有一些变通办法.

1. Quick dirty and not transparent but technically it would work:

Your 100 component. Template:

<el-form ref="elform">

A parent which uses your 100. Template:

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

Script:

...
mounted () {
  this.$refs.form = this.$refs.form.$refs.elform
}

在这之后，this.$refs.form实际上是指granchild <el-form>

2. This one would be more elaborate, but probably mach better then the first method:

为了使el-form-responsive组件真正透明，可以将子el-form组件中的一些方法和属性公开给任何潜在的父组件.比如:

100. Template:

<el-form ref="elform">

Script:

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