2 回答

TA貢獻(xiàn)1859條經(jīng)驗 獲得超6個贊
我認(rèn)為不可能直接模仿React 的 ref. Vue 中的ref屬性只是一個字符串,用于在渲染函數(shù)期間注冊對父對象的子組件引用。$refs
這是文檔doc和doc的鏈接
所以基本上它是一種反向邏輯..而不是在 Vue 中將 ref 傳遞給子級,而是從子級到父級。因此,此時創(chuàng)建孫子引用實際上是不可能的,而這正是您所需要的。
不過有一些解決方法。
1. 快速臟且不透明但從技術(shù)上講它可以工作: 在使用您的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實際上是對孫子的引用<el-form>
2. 這個會更復(fù)雜,但可能比第一種方法更好:
為了使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()
}
}
}
那么在一些父級內(nèi)部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`
},

TA貢獻(xiàn)1780條經(jīng)驗 獲得超4個贊
試試這個用孩子的,在替換父母的參考 el-form-responsive
<template>
<el-form v-on="$listeners" v-bind="$attrs" :label-position="labelPosition" ref='ref'>
<slot />
</el-form>
</template>
mounted () {
Object.entries(this.$parent.$refs).forEach(([key, value]) => {
if (value === this) {
this.$parent.$refs[key] = this.$refs.ref
}
})
...
添加回答
舉報