問題描述

在vue專案中，父元件通過prop給子元件傳值時，如果prop值是從伺服器端獲取，則父元件可能會傳給子元件一個預設值(服務端資料還未及時獲取)，那麼，我們就需要實時watch這個prop值，一旦prop值有更新，將立即通知子元件更新。

解決方案

watch: {
  levelDetail: {
   immediate: true,// 很重要！！！
   handler (val) {
    this.levelPersonal = !val ? {} : val
    // console.log('action Value:',val,this.levelPersonal)
   }
  }
 },

官方文件

vue-watch 參考文件

補充知識：vue父元件props引數太大時子元件created取不到資料-解決方法

問題：

父元件呼叫子元件：

<mk-form :list="formList" :formvalue="formvalue"></mk-form>

其中的formList資料是用ajax呼叫的，資料比較大，應該有些延遲

子元件的created中呼叫props時，輸出的是預設資料：

輸出：

解決方法：

第一種：加上 v-if 來判斷資料是佛載入完成了，載入完了再渲染：

<mk-form v-if="formList!=null" :list="formList" :formvalue="formvalue"></mk-form>

第二種：用 setTimeout 來做延遲，但這樣的方法不準確，應該視情況使用

其實兩種方法都應該視情況來使用。

以上這篇vue 子元件watch監聽不到prop的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。