我有一个应该将所有内容传递给孩子的组件。我已经成功传递了$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
传递给特殊的方式。
答案 0 :(得分:1)
我认为不可能直接模仿 React's ref
。 Vue 中的ref
属性只是一个字符串,用于在渲染功能期间注册对父项$refs
对象的子项引用。
因此,基本上,这是一种反向逻辑。.而不是将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
el-form-responsive