在我用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作用
以上是我個人遇到的問題,並加以理解,可能有些地方我理解的有些偏差,但希望如果有遇到這些問題的人能夠用着種方法去解決,並希望大神們,多多指教。