需求: 父組件像封裝的子組件傳值 (父組件屬性傳值，子組件props接受) 子組件接受后經過處理回顯頁面;
預想:子組件接受值 , 經過watch監聽,在監聽中處理數據,回顯數據;
問題:子組件在created時已經接受了傳遞的值 但是卻沒有走監聽導致無法回顯 ;
傳值過程:
watch:
問題來了:就是不走監聽:
但是因為是公用的組件:別的頁面調用時是走監聽的; 難受啊aaaa
后來想是不是因為頁面沒有響應 要不重新渲染一下 :
引入:
總之吧就是: 改變了數據但是沒有觸發視圖更新。
視圖更新?靈機一動直接來的時候深拷貝一下值在付給本身不就視圖更新了
代碼:
功能倒是實現了 然后給自己挖了一個坑 報錯嘍~ 又開始解決報錯。。。
報錯信息 大概意思就是傳遞的值在初始化里面更改然后會被覆蓋掉建議使用計算屬性 也就是語法不予許這樣更改父組件傳遞的值吧
原來是因為子組件中再修改父組件的值時會出現如上報錯。。。 (百度了一下不少大兄弟都見過這報錯呀 哈哈哈hh)
那我不修改了 行不 我把傳來的值付給臨時變量 后期都操作臨時變量 ,我倒是試了一下 是好使的功能也沒有問題也沒有報錯信息
就當快關閉頁面的時候
我的初衷是啥????? 只是想更新一下視圖 為啥自己搞的那么麻煩 真的是。。。剛入行見諒見諒
官方文檔還是得擼啊!!!!
Vue.set();
簡單點~表達的方式~簡單點~
Vue.set(a,b,c) a是要更改的數據,b是數據的第幾項,c是更改后的數據
響應式原理:https://cn.vuejs.org/v2/guide/reactivity.html 看啊看看!!!!!
this.$set()和Vue.set()本質方法一樣，前者可以用在methods中使用。
set方法調用時，可以觸發頁面全部重新渲染。
最后...一句代碼 解決的、。。。。。。。。
到這里一句代碼就可以解決的問題
我繞了那么大一圈 打擾了打擾了。。。。。
在后期的學習中 watch 有一個屬性 immediate 改為true就可以解決這個問題，實現初始化時監聽 ，看這里
現在就是這心情 這表情
學無止境 不理解的東西還是太多了
那些見過的卻不知道哪里用的屬性 以后多多照顧
加油~~不忘初心
有幸看到這里滴小朋友~ 一起成長吧~~~~~~~~