vue在傳值的時候經常遇到的問題


在我用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作用

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM