經驗篇之vue中傳值以及賦值問題

2021-08-24 20:15:28 字數 628 閱讀 2094

作為vue非資深的學習者,在工作中使用vue的時候還是遇見的很多所謂的坑,打算總結一下;就在昨天pm找到我,給我看了乙個bug,很是頭疼的是,我看了半天**就是看不出有什麼問題,但是實現起來就是報錯。先看一下場景:

這是詳情頁的tab欄,這裡的大概邏輯就是從別的頁面跳轉到詳情頁並且需要選中虛擬伺服器組這個tab欄,**的邏輯是先獲取詳情頁資訊detail,然後把detail這個物件以props的形式傳遞給虛擬伺服器組這個子元件,

export default 

},methods: }}

我在這裡多做了一步,就是講props裡面的屬性賦值給了data裡面的變數,但是如果我跳轉到詳情頁後立即轉到虛擬服務這個tab欄的時候,(此時會立即觸發***方法,並且會使用type這個變數),此時回報錯,就是type是未定義的?

解決方法是,直接將props中的detail變數直接拿來使用,不需要賦值給data中的變數,就不會出現這種情況。

深層的原因不清楚,但是初步斷定是時間差的問題,在測試的時候發現,這種bug不是必然復現的,時好時壞,直接使用的話避免了這個問題。

vue之元件傳值

父傳子 子接收props 第二種方法 this.refs.child.子元件的屬性或者方法子傳父 addsum e 父接收changesum e 第二種方法 this.parent.父元件的屬性或者方法深度傳值,用於元件多層巢狀 provide 子元件或孫元件 inject foo listener...

VUE中元件傳值

1 父傳值v bind 父元件通過v bind data data 傳值,簡寫等同於 data data 將資料傳遞給引用的子元件 2 子接收props 子元件通過props接收父元件傳的值 props 簡單寫法 props data props是單向繫結的,子元件不可以修改父元件的值,在子元件中修...

vue傳值之vuex用法

vuex用法 mutations中的方法是用來改變state中的資料 在mutations中的函式的第乙個引數都是state 第二個引數是通過commit執行的時候傳遞過來的引數 這裡的函式最多只有兩個引數 actions中的函式的第乙個引數都是store new 出來的vuex的例項 第二個引數是...