vue中的傳值及賦值問題怎么解決

這篇文章主要介紹“vue中的傳值及賦值問題怎么解決”，在日常操作中，相信很多人在vue中的傳值及賦值問題怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中的傳值及賦值問題怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

vue的傳值及賦值

作為Vue非資深的學習者，在工作中使用vue的時候還是遇見的很多所謂的坑，打算總結一下；就在昨天PM找到我，給我看了一個bug，很是頭疼的是，我看了半天代碼就是看不出有什么問題，但是實現起來就是報錯。

先看一下場景

這是詳情頁的tab欄，這里的大概邏輯就是從別的頁面跳轉到詳情頁并且需要選中虛擬服務器組這個tab欄，代碼的邏輯是先獲取詳情頁信息Detail，然后把detail這個對象以props的形式傳遞給虛擬服務器組這個子組件

export default {
    props：['detail'],
    data(){
        return {
            type: this.detail.type
        }
    },
    methods: {
        XXX(){
        }
    } 
}

我在這里多做了一步，就是講props里面的屬性賦值給了data里面的變量，但是如果我跳轉到詳情頁后立即轉到虛擬服務這個tab欄的時候，（此時會立即觸發XXX方法，并且會使用type這個變量），此時回報錯，就是type是未定義的？

解決方法

直接將props中的detail變量直接拿來使用，不需要賦值給data中的變量，就不會出現這種情況。

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

vue的賦值小技巧

嚴謹代碼

嚴謹性即健壯性，是指軟件對于規范要求以外的輸入情況的處理能力。所謂的系統是指對于規范要求以外的輸入能夠判斷出這個輸入不符合規范要求，并能有合理的處理方式。

另外健壯性有時也和容錯性，可移植性，正確性有交叉的地方。

比如，一個軟件可以從錯誤的輸入推斷出正確合理的輸入，這屬于容錯性量度標準，但是也可以認為這個軟件是健壯的。

undefined判斷

JS 和 Vue中有兩個特殊數據類型：undefined 和 null，下節介紹了 null 的判斷，下面談談 undefined 的判斷。

以下是不正確的用法：

var exp = undefined;
if (exp == undefined)
{
alert(“undefined”);
}

exp 為 null 時，也會得到與 undefined 相同的結果，雖然 null 和 undefined 不一樣。注意：要同時判斷 undefined 和 null 時可使用本法。

var exp = undefined;
if (typeof(exp) == undefined)
{
alert(“undefined”);
}

以下是正確的用法：

var exp = undefined;
if (typeof(exp) == “undefined”)
{
alert(“undefined”);
}

到此，關于“vue中的傳值及賦值問題怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！