第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Vue 中轉(zhuǎn)發(fā) $refs

如何在 Vue 中轉(zhuǎn)發(fā) $refs

桃花長相依 2021-11-18 16:36:01
我有一個組件應(yīng)該將所有內(nèi)容傳遞給孩子。我已成功通過$attrs并且$listeners已經(jīng):<template>  <el-form v-on="$listeners" v-bind="$attrs" :label-position="labelPosition">    <slot />  </el-form></template>但是我不確定如何$refs像我們在React 中所做的那樣進(jìn)行轉(zhuǎn)發(fā),以便在像這樣使用我的組件時:<el-form-responsive  class="form"  :model="formValues"  status-icon  :rules="rules"  ref="form"  label-width="auto"  @submit.native.prevent="submitForm">然后this.$refs.form實際上是對 child 的引用<el-form>。我寧愿透明地執(zhí)行此操作,因為el-form-responsive您將與 a完全相同的 props 傳遞給 ael-form而無需知道refs必須以特殊方式傳遞。
查看完整描述

2 回答

?
慕絲7291255

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`  

},


查看完整回答
反對 回復(fù) 2021-11-18
?
Helenr

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

    }

  })

...


查看完整回答
反對 回復(fù) 2021-11-18
  • 2 回答
  • 0 關(guān)注
  • 294 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號