溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue子組件中mounted取不到props中的值怎么解決

發(fā)布時(shí)間：2022-04-24 10:57:06 來源：億速云 閱讀：1861 作者：iii 欄目：開發(fā)技術(shù)

本文小編為大家詳細(xì)介紹“vue子組件中mounted取不到props中的值怎么解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue子組件中mounted取不到props中的值怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

子組件mounted取不到props的值

問題：傳到子組建到數(shù)據(jù)是從接口調(diào)用的，導(dǎo)致創(chuàng)建頁面的時(shí)候把空對象或者數(shù)組傳給了子組件

方法一

用watch來監(jiān)聽props中值是否有變化

方法二（建議）

調(diào)用子組件的時(shí)候加上v-if判斷，判斷數(shù)組或者對象是否存在數(shù)據(jù)

組件props第一次取不到值

給值加上sync

<el-dialog title="測試" :visible.sync="dialog" width="40%">
      <room-Checked @event1="change($event)" :date.sync="date" /> 
    </el-dialog>

使用v-if

<el-dialog title="測試" :visible.sync="dialog" width="40%">
      <room-Checked @event1="change($event)" :date.sync="date" v-if="data.length > 0" /> 
    </el-dialog>

記得在data里先定義一下 data= []

在子組件里使用watch

props:[ data ]
  watch: {
    date (newValue, oldValue) {
      if (newValue !== oldValue) {
          this.id = this.data[0].id
        console.log('date', this.id)
      }
    }
  },

讀到這里，這篇“vue子組件中mounted取不到props中的值怎么解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手