在我用vue編寫程式的時候,在傳值的時候,經常會遇到些問題,像今天遇到了兩個問題,在用父傳子的方法去傳值,當父組件中的要傳的數據是for迴圈出來的或者是列表的時候,你想每次運行的事件,都去傳某一行,或者某部分數據的時候,在子組件中用mounted(){},去載入並顯示在頁面上,還有就是在父傳子中,把 ...
在我用vue編寫程式的時候,在傳值的時候,經常會遇到些問題,像今天遇到了兩個問題,在用父傳子的方法去傳值,當父組件中的要傳的數據是for迴圈出來的或者是列表的時候,你想每次運行的事件,都去傳某一行,或者某部分數據的時候,在子組件中用mounted(){},去載入並顯示在頁面上,還有就是在父傳子中,把數據傳過來了,但你運行事件的時候,哪個穿過來的數據值沒有運行。
這裡就涉及到了兩個問題,一個就是生命周期的問題,另外一個就是非同步的問題
向我第一個問題中,生命周期的問題,當我父傳子的時候,我傳過來的數據在mounted中運行後,就相當與這個生命已經走向了了結束了。當你在去讓別的值傳進來,他顯示的數據也同樣不會發生變化,因為他的生命已經結束了,那怎麼讓他的生命在活過來呢?這就需要用到我們的監聽了,監聽這個數據後,讓生命起死回生
watch:{ 父組件傳過來的值:function(){ this.運行載入事件() } },
加入這個監聽後,就能讓你傳不同的數據,在子組件中顯示不同的數據了。
來再說下第二個問題,非同步問題,什麼叫非同步,非同步就是同時載入數據,同時載入的時候這時候就有坑了,大家要小心了。我的代碼是這樣寫的
props: [ 'app' ], mounted() { this.gettext() }, methods: { //顯示數據 gettext: function() { console.log(this.app) } }
這樣寫也不能說錯對吧,但大家都知道mounted是組件載入完後在去載入他自己的,但prop比mounted載入的還要慢上一部所以我們這要去解決下非同步的問題,這裡我就放一個我常用的解決方案
props: [ 'app' ], mounted() { this.gettext() }, methods: { gettext: function() { setTimeout(() => { console.log() }, 300) },
這就是解決方案,加上一個定時器setTimeout他的時間最好在500以內,因為一個正常網頁載入的速度差不多就是500ms作用
以上是我個人遇到的問題,並加以理解,可能有些地方我理解的有些偏差,但希望如果有遇到這些問題的人能夠用著種方法去解決,並希望大神們,多多指教。