vue父組件向子組件傳值,渲染成功但是報錯,而且是刷新報錯,代碼更改不會

1.問題

at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-6900a511","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/first1.vue (app.js:3200), <anonymous>:17:50)

報錯就是這個樣子的,但是數據其實是渲染出來了,這個問題是因爲一開始渲染的時候數據還沒來,等數據來了之後又重新渲染了一遍,所以我們既看到了數據有看到了報錯。

我一開始想的是mounted裏接收一下,在剛開始掛載的時候就差處理這個數據,但是實際上是拿不到的。

上一行是能拿到的,但是下面就拿不到了,搜了一下,貌似上面也是不應該拿到了,但是問題到這裏差不多就能想到就是時間先後的問題,自然而然的想到了延時器。

2.1延時器

在元素上面寫一個v-if判斷一下

但是有個問題,這個辦法雖然不會報錯了,也會顯示,但是會造成閃一下的畫面,因爲一開始渲染了,不顯示,0.5秒以後渲染顯示頁面,頁面就會忽然出現,也想過把時間改短一點,人眼分辨不出來的地步,但是畢竟不是很正統的辦法。

2.1監聽辦法

後來又搜了搜有監聽的辦法,當然這個也需要一個判斷

打印出來也有效果,刷新之後也不報錯

但是這個辦法也有個問題,就是我們開發肯定是時不時在改代碼的,vue裏肯定都是熱更新,改了代碼之後自動更新,問題就來了,這個監聽在你改了代碼之後並不會出發,畢竟first1data這個數據沒有更改,然後就又出現問題,因爲v-fi那個更改是在監聽裏的,這下好了,模塊直接隱藏掉了,雖然一開始不會報錯,但是對於開發是不友好的

2.3v-fi

v-if簡單粗暴,如果需要渲染就直接在上面寫一個v-if

解決了。。。。

2.4最後

不過我總感覺應該還有別的辦法,但是還沒找到,如果哪位看官有找到更合適的辦法,麻煩告訴我下,謝謝

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章